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 đó.
Code- 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.
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
Không có nhận xét nào:
Đăng nhận xét