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>
自己动手试一试 »
