使用 JavaScript 删除 HTML 元素
Tahseen Tauseef
2023年1月30日
2022年5月10日
本教程文章将讨论 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>