jQuery: append() method
Phương thức append() dùng để thêm nội dung vào sau nội dung bên trong của những phần tử được chỉ định.
Như vậy append() chỉ áp dụng được cho những thẻ đôi, tức là thẻ gồm phần thẻ mở và thẻ đóng (ví dụ như <p></p>, <section></section>, ...) mà không áp dụng được cho thẻ đơn như <img /> chẳng hạn.
Cú pháp:
$(Bộ_chọn).append( "Nội_dung");
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>v1study.com</p>
<p>demo.v1study.com</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
Thêm phần tử mới bằng append()
Ngoài tác dụng thêm nội dung như đã trình bày ở trên, ta còn có thể sử dụng append() để thêm vào những phần tử mới.
Phần tử mới có thể được tạo bằng HTML, jQuery hay JS/DOM.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script>
<script>
function appendText() {
var txt1 = "<p>Text.</p>"; //Tạo phần tử mới bằng HTML
var txt2 = $("<p></p>").text("Text."); //Tạo phần tử mới bằng jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; //Tạo phần tử mới bằng DOM
$("body").append(txt1, txt2, txt3); //Append new elements
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>
</body>
</html>