前端必知必会-JavaScript HTML DOM 元素（节点）

文章目录

• JavaScript HTML DOM 元素（节点）
• • 添加和删除节点（HTML 元素）
  • 创建新的 HTML 元素（节点）
  • 创建新的 HTML 元素 - insertBefore()
  • 删除现有 HTML 元素
  • 删除子节点
  • 替换 HTML 元素
• 总结

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("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 passage.");

然后您必须将文本节点附加到 <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("This is new.");
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("This is new.");
para.appendChild(node);

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

总结

本文介绍了JavaScript HTML DOM 元素（节点）的使用，如有问题欢迎私信和评论