jQuery - appendTo và prependTo

Hàm appendTo và prependTo được dùng để chèn một đối tượng HTML DOM đang truy xuất vào đối tượng HTML DOM ta chọn ở tham số của hàm. Có nghĩa là nó sẽ cắt toàn bộ đoạn HTML của đối tượng ta đang truy xuất để chèn vào đối tượng mà ta chọn ở tham số của hàm.

• appendTo(jQuery selector): Chèn đối tượng HTML DOM đang được truy xuất vào cuối danh sách con của đối tượng được tham số selector chọn ra.
  • VD: jQuery("#a").appendTo("#b"); có nghĩa là toàn bộ nội dung thẻ có id là a sẽ được chèn vào cuối thẻ có id là b
• prependTo(jQuery selector): Chèn đối tượng HTML DOM đang được truy xuất vào đầu danh sách con của đối tượng được tham số selector chọn ra.
  • VD: jQuery("#a").prependTo("#b"); có nghĩa là toàn bộ nội dung thẻ có id là a sẽ được chèn vào đầu thẻ có id là b

Ví dụ ta có hai thẻ ul như sau:

<ul id="input_ul">
 <li>chèn 1</li>
 <li>chèn 2</li>
 <li>chèn 3</li>
</ul>
<ul id="choose_ul">
 <li>Con 1</li>
 <li>Con 2</li>
</ul>

Khi ta nhấn nút:

• appendTo thì toàn bộ thẻ input_ul sẽ được chèn vào sau thẻ li con 2
• prependTo thì toàn bộ thẻ input_ul sẽ được chèn vào trước thẻ li con 1

Code

<script>
jQuery(document).ready(function(){
 jQuery("#butAppendTo").click(function(){
  jQuery("#input_ul").appendTo("#choose_ul");
 });
 jQuery("#butPrependTo").click(function(){
  jQuery("#input_ul").prependTo("#choose_ul");
 });
});
</script>
<div>
 <div style="float:left;border:1px solid gray;displày:block;width:350px;">
  <ul id="input_ul">
   <li>chèn 1</li>
   <li>chèn 2</li>
   <li>chèn 3</li>
  </ul>
  <ul id="choose_ul">
   <li>Con 1</li>
   <li>Con 2</li>
  </ul>
 </div>
 <div style="float:left;padding:20px;">
  <input type="button" id="butAppendTo" value="appendTo"/><br/>
  <input type="button" id="butPrependTo" value="prependTo"/><br/>
 </div>
</div>

Demo

• chèn 1
• chèn 2
• chèn 3

• Con 1
• Con 2

Lưu ý:

• Chỉ nên sử dụng hàm này khi biết rõ đối tượng bạn cần chèn là gì.
• Tốt nhất nên dùng với cách select bằng id, tránh dùng hàm này với các selector trả về một mảng đối tượng như selector bằng name hoặc tag name. Ví dụ minh họa: Bạn hãy click nhiều lần vào bất kỳ button nào bạn sẽ thấy hàm sẽ không chạy chính xác với các selector trả về một mảng đối tượng

• chèn 1
• chèn 2
• chèn 3

1. Con 1
2. Con 2

1. Con 1
2. Con 2