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 文档包含一个具有两个子节点（两个 <p> 元素）的 <div> 元素。
<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 文档包含一个具有两个子节点（两个 <p> 元素）的 <div> 元素。
<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>
自己尝试 »
