jQuery - append và prepend

append và prepend là hai hàm dùng để thao tác trên các con của một HTML DOM.

• append(html): Chèn đoạn html text hoặc jQuery object vào cuối các thẻ con của HTML DOM đang truy xuất.
• prepend(html): Chèn đoạn html text hoặc jQuery object vào đầu các thẻ con của HTML DOM đang truy xuất.

Ví dụ ta có một thẻ ul có 3 thẻ li như sau:

<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>

Giả sử ta muốn chèn một thẻ li có nội dung là Con 0 vào trong thẻ ul đó.

• Hàm append sẽ chèn thẻ li đó vào sau thẻ li Con 3.
• Hàm prepend sẽ chèn thẻ li đó vào trước thẻ Con 1.

Code

Ví dụ ta có một thẻ ul có 5 thẻ li như sau:

<script>
jQuery(document).ready(function(){
jQuery("#butAppend").click(function(){
jQuery("#test_ul").append("<li>Con 0</li>");
});
jQuery("#butPrepend").click(function(){
jQuery("#test_ul").prepend("<li>Con 0</li>");
});
});
</script>
<div>
<div style="float:left;border:1px solid gray;displày:block;width:350px;">
<ul id="test_ul">
<li>con 1</li>
<li>con 2</li>
<li>con 3</li>
</ul>
</div>
<div style="float:left;padding:20px;">
<input type="button" id="butAppend" value="Append"/><br/>
<input type="button" id="butPrepend" value="Prepend"/><br/>
</div>
</div>

Demo

• con 1
• con 2
• con 3