JavaScript HTML DOM 元素（節點）
新增和移除節點（HTML 元素）
建立新的 HTML 元素（節點）
要將新元素新增到 HTML DOM，您必須首先建立該元素（元素節點），然後將其附加到現有元素。
示例
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("這是新內容。");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
自己動手試一試 »
示例說明
此程式碼建立一個新的 <p> 元素
const para = document.createElement("p");
要向 <p> 元素新增文字，您必須先建立一個文字節點。此程式碼建立一個文字節點
const node = document.createTextNode("這是一個新段落。");
然後，您必須將文字節點附加到 <p> 元素
para.appendChild(node);
最後，您必須將新元素附加到現有元素。
此程式碼查詢現有元素
const element = document.getElementById("div1");
此程式碼將新元素附加到現有元素
element.appendChild(para);
建立新的 HTML 元素 - insertBefore()
上一個示例中的 appendChild() 方法將新元素作為最後一個子節點附加到了父節點。
如果您不希望這樣，可以使用 insertBefore() 方法
示例
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("這是新內容。");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
自己動手試一試 »
移除現有的 HTML 元素
要移除 HTML 元素，請使用 remove() 方法
示例
<div>
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>
自己動手試一試 »
示例說明
HTML 文件包含一個 <div> 元素，其中有兩個子節點（兩個 <p> 元素）
<div>
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
查詢要移除的元素
const elmnt = document.getElementById("p1");
然後在此元素上執行 remove() 方法
elmnt.remove();
remove() 方法在舊版瀏覽器中不起作用，請參閱下面的示例，瞭解如何改為使用 removeChild()。
移除子節點
對於不支援 remove() 方法的瀏覽器，您必須找到父節點才能移除元素
示例
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
自己動手試一試 »
示例說明
此 HTML 文件包含一個 <div> 元素，其中有兩個子節點（兩個 <p> 元素）
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</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 元素
要將元素替換到 HTML DOM 中，請使用 replaceChild() 方法
示例
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("這是新內容。");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
自己動手試一試 »
