迹忆客 专注技术分享

本篇文章将讨论 JavaScript 中的元素、如何在 JavaScript 中添加元素以及如何在 JavaScript 中删除现有元素。

本文将解决以下问题：

• JavaScript 中的元素是什么
• 如何在 JavaScript 中添加元素
• 如何在 JavaScript 中删除元素

JavaScript 中的元素是什么

JavaScript 元素是 HTML 文档中的一个节点。HTML 元素使用标签显示。

HTML 元素中的两种标签

标签用于将 HTML 元素添加到文档中。有两种类型的标签：

• 双标签由开始标签和结束标签组成。

<div>
    Some Content here
</div>

• 自闭标签是单个标签。没有单独的开始和结束标签。

<img src="SomeLinkHere" alt="" />

在 JavaScript 中如何添加元素

可以使用 JavaScript 将新的 HTML 元素插入到 Document 对象模型中。

为此，我们需要在文档上创建一个新元素，然后为其创建一个文本节点（如果需要）将其附加到创建的元素中。

最后，将创建的元素附加到文档对象模型中已经存在的元素中。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
const ThirdParagraph = document.createElement("p");
ThirdParagraph.id = "paragraphThree";
const TextNode = document.createTextNode("This is the Third paragraph.");
ThirdParagraph.appendChild(TextNode);

const newElement = document.getElementById("main");
newElement.appendChild(ThirdParagraph);
</script> 

id 为 main 的主容器有两个段落，分别是 paragraphOne 和 paragraphTwo。

在文档上创建了一个新的段落元素，并且一个名为 paragraphThree 的 ID 已附加到 JavaScript。

此外，还创建了一个文本节点并将其附加到段落元素。ThirdParagraph 将被添加到 main 元素中。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
  <p id="paragraphThree">This is the Third paragraph.</p>
</div>

可以使用 JavaScript 库（例如 jQuery）重复相同的过程。

要使用 jQuery 将新元素添加到 DOM 中，你将访问要添加元素的容器并使用 append 关键字将其添加到容器中，即

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
	$("#main").append("<p id='paragraphThree'>This is the Third paragraph.</p>");
</script> 

在 JavaScript 中如何删除元素

要从文档对象模型中移除元素，你需要访问该元素并将其移除。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
  var SecondPara = document.getElementById("paragraphTwo");
  SecondPara.remove();
</script>

该元素由 id 访问，并在其上调用元素的删除函数，这会将其从 DOM 中删除。

同样的，上面的结果可以用 jQuery 来实现。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
  $("#paragraphTwo").remove();
</script>