JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）

创建新的 HTML 元素（节点）

要向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后将其附加到现有元素。

示例

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

亲自试一试 »

示例解释

这段代码创建了一个新的<p>元素：

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

要将文本添加到<p>元素，您必须首先创建一个文本节点。此代码创建一个文本节点：

const node = document.createTextNode("This is a new paragraph.");

然后您必须将文本节点附加到<p>元素：

para.appendChild(node);

最后，您必须将新元素附加到现有元素。

此代码查找现有元素：

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

此代码将新元素附加到现有元素：

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

这个appendChild()上一个示例中的方法将新元素附加为父元素的最后一个子元素。

如果你不想这样，你可以使用insertBefore()方法：

示例

亲自试一试 »

删除现有的 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 文档包含一个<div>具有两个子节点的元素（两个<p>元素）：

<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 文档包含一个<div>具有两个子节点的元素（两个<p>元素）：

<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");

找出<p>元素与id="p1"：

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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

亲自试一试 »