4.7 html 標籤的操控
新增新的元素節點
.append()
說明:貼在元素裡面的最後面。
語法:
$("#the_div").append("<p>段落</p>");
範例:
.prepend()
說明:貼在元素裡面的最前面。
語法:
$("#the_div").prepend("<p>段落</p>");
範例:
.after() 與 .before()
.after()
說明:貼在同層的下一個。
.before()
說明:貼在同層的前一個。
語法:
$("ul li").eq(1).after("<li>新項目</li>");
$("ul li").eq(1).before("<li>新項目</li>");
範例:
.replaceWith()
說明:取代原來的元素。
語法:
$("ul li").eq(1).replaceWith("<li>新項目</li>");
範例:
元素 wrap
.wrap()
說明:該元素用什麼包起來。
html:
<p>這是段落</p>
<h1>這是標題</h1>
<p>這是段落</p>
執行以下程式:
$("h1").wrap("<div class='bg_gray'>");
會變成:
<p>這是段落</p>
<div class='bg_gray'>
<h1>這是標題</h1>
</div>
<p>這是段落</p>
範例:
複製
.clone()
說明:複製元素。
html:
<div id="div_block">
<p>這是 div 裡的段落</p>
</div>
執行以下程式,就可以複製 <p>這是 div 裡的段落</p>
:
$("#div_block p").clone();
範例:
移除元素
.remove()
說明:移除元素。
.empty()
說明:清空掉元素裡面的所有東西,只保留自己。
.unwrap()
說明:移除父元素。
範例: