使用 JavaScript 删除 HTML 元素

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

本文将解决以下问题:

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

JavaScript 中的元素是什么

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

HTML 元素中的两种标签

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

  • 双标签由开始标签和结束标签组成。
<div>
    Some Content here
</div>

注意

<div> 代表开始标签,</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>