Hàm append là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng để chèn nội dung, được xác định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp.
1. Cú pháp hàm append
Cú pháp:
append(content [, content])append(function)
Tham số:
content: DOM element, text node, mảng các element và text node, chuỗi HTML hoặc đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử.function: Một hàm nhận hai đối số:index(vị trí của phần tử trong tập hợp) vàhtml(nội dung HTML hiện tại của phần tử). Hàm này trả về một chuỗi HTML, một DOM element hoặc một đối tượng jQuery để chèn vào cuối mỗi phần tử trong tập hợp các phần tử.
Kết quả trả về:
- Không có giá trị trả về đối với hàm
append.
Phiên bản hỗ trợ:
- Phiên bản 1.0: Hỗ trợ cú pháp
append(content [, content]). - Phiên bản 1.4: Hỗ trợ cú pháp
append(function).
Ghi chú:
.append()chèn nội dung chỉ vào cuối của mỗi phần tử trong tập hợp được chọn.- Có một phiên bản tương tự là
.appendTo()với cú pháp và mục đích tương tự. Sự khác biệt chính nằm ở cú pháp và vị trí của nội dung và mục tiêu.
2. Một số ví dụ dùng hàm append
2.1. Dùng để bổ sung các loại nội dung khác nhau
Dưới đây là một ví dụ sử dụng hàm append để bổ sung các loại nội dung khác nhau vào cuối một phần tử trong thư viện jQuery:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery append() Example</title>
<style>
.box {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box" id="target">
<p>Existing content.</p>
</div>
<script>
$(document).ready(function() {
// DOM element
var domElement = document.createElement("span");
domElement.innerText = "This is a DOM element. ";
// Text node
var textNode = document.createTextNode("This is a text node. ");
// Array of elements and text nodes
var arrayOfNodes = [domElement, textNode];
// HTML string
var htmlString = "<strong>This is HTML content.</strong>";
// jQuery object
var jQueryObject = $("<p>This is a jQuery object.</p>");
// Using .append() to add various content types to the target element
$("#target")
.append(domElement)
.append(textNode)
.append(arrayOfNodes)
.append(htmlString)
.append(jQueryObject);
});
</script>
</body>
</html>
Giải thích:
- Trong ví dụ này, chúng ta sử dụng hàm
appendđể chèn vào cuối phần tử cóid="target"các loại nội dung khác nhau: DOM element, text node, mảng các elements và text nodes, chuỗi HTML và đối tượng jQuery. domElement,textNode, vàarrayOfNodesđại diện cho các loại DOM element, text node, và mảng elements và text nodes.htmlStringlà một chuỗi HTML.jQueryObjectlà một đối tượng jQuery.- Mỗi loại nội dung được chèn vào cuối phần tử có
id="target"sử dụng hàmappend.
2.2. Dùng với tham số function
Dưới đây là một ví dụ sử dụng hàm append với tham số là một hàm:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Game using jQuery append()</title>
<style>
.box {
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
.winning-item {
background-color: green;
color: white;
}
.game-item {
margin: 5px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box" id="game-board">
<p>Game Board:</p>
</div>
<script>
$(document).ready(function() {
function generateGameItem(index) {
// Generate a random number between 1 and 10
const randomNumber = Math.floor(Math.random() * 10) + 1;
// If the random number matches the index, it's a winning item
const isWinningItem = index + 1 === randomNumber;
// Create HTML for the game item
const gameItemHTML = `<div class="game-item${isWinningItem ? ' winning-item' : ''}">${isWinningItem ? 'Winning Item' : 'Try Again'}</div>`;
return gameItemHTML;
}
// Using .append() with a function to generate and add game items to the game board
for (let i = 0; i < 10; i++) {
$("#game-board").append(function(index, html) {
return generateGameItem(index);
});
}
});
</script>
</body>
</html>
Giải thích:
- Chúng ta định nghĩa một hàm
generateContent(index)để tạo nội dung HTML dựa trên chỉ mục (index). - Sử dụng vòng lặp để gọi hàm
appendvà truyền một hàm làm tham số. Hàm này nhận hai đối số:index(vị trí của phần tử trong tập hợp) vàhtml(nội dung HTML hiện tại của phần tử). - Hàm
appendsẽ chèn nội dung được trả về bởi hàm trong mỗi lần gọi vào cuối phần tử cóid="target". - Kết quả là 5 mục mới được thêm vào cuối phần tử có
id="target"và mỗi mục chứa nội dung được tạo dựa trên chỉ mục.
2.3. Dùng hàm append, appendTo và animate để tạo game bóng bàn
Dưới đây là một ví dụ sử dụng các hàm append, appendTo và animate để tạo ra một trò chơi game bóng bàn hiệu ứng di chuyển của quả cầu:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bouncing Ball Game</title>
<style>
#game-board {
border: 1px solid #000;
width: 300px;
height: 100px;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.paddle {
width: 10px;
height: 100%;
background-color: blue;
position: absolute;
top: 0;
}
.ball {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
bottom: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="game-board">
<div class="paddle" id="left-paddle"></div>
<div class="paddle" id="right-paddle" style="right: 0;"></div>
<div class="ball"></div>
</div>
<button onclick="moveLeft()" id="moveLeftBtn">Move Left</button>
<button onclick="moveRight()" id="moveRightBtn">Move Right</button>
<script>
let ballPosition = 0; // Initial ball position
let boardWidth = $("#game-board").width();
let ball = $(".ball");
let interval;
$("#moveRightBtn").prop("disabled", true);
function moveLeft() {
clearInterval(interval);
interval = setInterval(function() {
ballPosition += 2;
if (ballPosition < boardWidth) {
if ((ballPosition >= boardWidth - 20) && ballPosition < boardWidth) {
clearInterval(interval);
ballPosition = boardWidth - 20;
$("#moveLeftBtn").prop("disabled", true);
$("#moveRightBtn").prop("disabled", false);
}
} else {
ballPosition = 0;
$("#left-paddle").append(ball);
clearInterval(interval);
$("#moveLeftBtn").prop("disabled", true);
$("#moveRightBtn").prop("disabled", false);
}
ball.animate({left: ballPosition + 'px'}, 25);
}, 25);
}
function moveRight() {
clearInterval(interval);
interval = setInterval(function() {
ballPosition -= 2;
if (ballPosition >= 0) {
if (ballPosition <= 20) {
clearInterval(interval);
ballPosition = 0;
$("#moveRightBtn").prop("disabled", true);
$("#moveLeftBtn").prop("disabled", false);
}
} else {
ballPosition = boardWidth - 20;
ball.appendTo($("#right-paddle"));
clearInterval(interval);
$("#moveRightBtn").prop("disabled", true);
$("#moveLeftBtn").prop("disabled", false);
}
ball.animate({left: ballPosition + 'px'}, 25);
}, 25);
}
</script>
</body>
</html>
Giải thích:
- Hàm
appendđược sử dụng để thêm một phần tử vào cuối một phần tử khác. Trong trò chơi, nó được dùng để di chuyển quả bóng giữa hai vợt bằng cách thêm quả bóng vào vợt mới.
- Hàm
appendTocũng thực hiện công việc tương tựappend, nhưng ngược lại. Nó được sử dụng để thêm một phần tử vào cuối một phần tử khác, nhưng được gọi trên phần tử sẽ được thêm. Trong trò chơi, nó được dùng để di chuyển quả bóng giữa hai vợt bằng cách thêm quả bóng vào vợt mới.
- Hàm
animateđược sử dụng để tạo hiệu ứng di chuyển mượt mà cho phần tử. Trong trò chơi, nó được dùng để tạo hiệu ứng di chuyển cho quả bóng khi di chuyển giữa các vợt.
