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()

說明：移除父元素。

範例：