技術標籤：jQueryjquery

目錄

• • 1. html() 清空節點
  • 2. empty() 清空節點
  • 3. remove() 移除節點

1. html() 清空節點

利用 html() 方法的原理，我們可以使用它來清空一個節點。

<div id="father">
    <div id="jack">我是 jack</div>
    <div id="jethro">我是 jethro</div>
    <div id="haven"
 
>我是 haven</div>
</div>

<script>
    $("#father").html("");
</script>

結果如下

此方法僅清空元素的內容，如果父元素綁定了事件，則事件監聽依然存在，容易導致記憶體洩漏。

2. empty() 清空節點

empty() 方法從被選元素移除所有內容，包括所有文字和子節點。

<div id="father">
    <div id="jack">我是 jack</div
 
>
    <div id="jethro">我是 jethro</div>
    <div id="haven">我是 haven</div>
</div>
<script>
    $("#father").empty();
</script>

結果如下

值得注意的是，empty() 方法除了移除內容之外，還執行了 clearData() 方法，移除了所有對應的事件監聽。

3. remove() 移除節點

remove() 方法移除被選元素，包括所有的文字和子節點。

<div id="father">
    <div id="jack">我是 jack</div>
    <div id="jethro">我是 jethro</div>
    <div id="haven">我是 haven</div>
</div>

<script>
    $("#jack").remove();
</script>

結果如下

“自殺” 只是一種表象，remove() 方法的原理是，呼叫其父元素的 removeChild() 方法實現移除節點。

同樣的，remove() 方法也會呼叫 clearData() 方法，同時移除這個節點相關的事件監聽。