The append() and prepend() methods

Thêm nội dung vào trong thành phần có sẵn rất đơn giản trong jQuery. Có nhiều phương thức để thêm vào trước hay sau, có thể là dạng chuỗi, phần tử DOM hay đối tượng jQuery làm tham số. Trong ví dụ tiếp theo, bạn sẽ thấy rất dễ để thêm một phần tử mới vào danh sách, dùng cả append() và prepend():

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>   
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a>

<ol id="olTestList1">
	<li>Existing item</li>
	<li>Existing item</li>
</ol>

Chúng ta có hai liên kết: Liên kết đầu tiên sẽ thêm một phần tử vào cuối danh sách, có nghĩa là phần tử mới sẽ được đưa vào làm phần tử cuối. Liên kết sau sẽ thêm một phần tử vào đầu danh sách, có nghĩa là phần tử mới sẽ được đưa vào làm phần tử đầu tiên. Trong ví dụ này, chúng ta chỉ đơn giản thêm vào một thành phần HTML nhưng chúng ta cũng có thể sinh ra phần tử mới trong jQuery, hay tạo ra nó thông qua mã JavaScript thông thường và phần tử DOM. Thực tế, cả phương thức append() và prepend() có thể thêm một lượng không giới hạn các phần tử. Trong ví dụ tiếp theo, tôi sẽ minh họa khả năng thêm các phần tử dưới nhiều dạng:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>   
<ol id="olTestList2"></ol>

<script type="text/javascript">
function AppendItemsToList()
{
	var item1 = $("<li></li>").text("Item 1");
	var item2 = "<li>Item 2</li>";
	var item3 = document.createElement("li");
	item3.innerHTML = "Item 3";
	
	$("#olTestList2").append(item1, item2, item3);
}
</script>

As you can see, item1 is a jQuery generated element, item2 is a simple HTML string and item3 is a JavaScript DOM generated element. They are all appended to the list using the same call and of course this would have worked for the prepend() method too.

There are variations of the append() and prepend() methods, called appendTo() and prependTo(). They do pretty much the same, but they do it the other way around, so instead of calling them on the elements you wish to append/prepend to, with a parameter of what is to be appended/prepended, you do the exact opposite. Which to use obviously depends on the situation, but here's an example showing you how to use them both:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>   
<ol id="olTestList3"></ol>

<script type="text/javascript">
function PrependItemsToList()
{	
	$("#olTestList3").prepend($("<li></li>").text("prepend() item"));
	$("<li></li>").text("prependTo() item").prependTo("#olTestList3");
}
</script>

In this example, we prepend the items, but you could of course do the exact same using append() and appendTo(). As you can see, the result is the same - only the order of what we do differs.