JavaScript HTML DOM 元素（節點）

添加和刪除節點（HTML 元素）

創建新 HTML 元素（節點）

如需向 HTML DOM 添加新元素，您必須首先創建這個元素（元素節點），然后將其追加到已有元素。

實例

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

親自試一試

例子解釋

這段代碼創建了一個新的 <p> 元素：

var para = document.createElement("p");

如需向 <p> 元素添加文本，則必須首先創建文本節點。這段代碼創建了一個文本節點：

var node = document.createTextNode("這是一個新段落。");

然后您需要向 <p> 元素追加這個文本節點：

para.appendChild(node);

最后您需要向已有元素追加這個新元素。

這段代碼查找一個已有的元素：

var element = document.getElementById("div1");

這段代碼向這個已有的元素追加新元素：

element.appendChild(para);

創建新 HTML 元素 - insertBefore()

前面例子中的 appendChild() 方法，追加新元素作為父的最后一個子。

除此之外您還可以使用 insertBefore() 方法：

實例

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

親自試一試

刪除已有 HTML 元素

如需刪除 HTML 元素，請使用 remove() 方法：

實例

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

親自試一試

例子解釋

這個 HTML 文檔包含一個帶有兩個子節點（兩個 <p> 元素）的 <div> 元素：

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

找到需要刪除的元素：

const elmnt = document.getElementById("p1");

然后對該元素執行 remove() 方法：

elmnt.remove();

注意：remove() 方法在舊瀏覽器中不起作用，請參閱下面的例子，了解如何改用 removeChild()。

刪除子節點

對于不支持 remove() 方法的瀏覽器，您必須找到父節點才能刪除一個元素：

實例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

親自試一試

例子解釋

此 HTML 文檔包含一個帶有兩個子節點（兩個 <p> 元素）的 <div> 元素：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

找到 id="div1" 的元素：

const parent = document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

const child = document.getElementById("p1");

從父元素中刪除子：

parent.removeChild(child);

這是一個常見的解決方法：找到要刪除的子節點，并使用其 parentNode 屬性找到父節點：

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

替換 HTML 元素

如需替換元素的，請使用 replaceChild() 方法：

實例

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

親自試一試