数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 JavaScript 中向 HTML DOM 添加新元素？
在本文中，我们将讨论如何在 JavaScript 中向 HTML DOM 添加新元素。
该 文档对象 提供了一个方法 createElement() 来创建元素，以及 appendChild() 方法 来将其添加到 HTML DOM。以下是创建 HTML DOM 的步骤：
步骤 1 - 要将元素插入 HTML DOM，首先，我们需要创建一个元素并将其附加到 HTML DOM。document.createElement() 用于创建 HTML 元素。创建元素的语法如下所示。
document.createElement(tagName[, options]);
其中，
tagName 是要创建的标签的名称。标签类型为 <p>。
options 参数是一个可选的元素对象。
步骤 2 - 创建标签后，我们需要创建文本并将其分配给标签。创建文本节点的语法如下所示。
Document.createTextNode("String");
步骤 3 - 创建文本后，我们需要将文本添加到 <p> 类型元素中，最终添加到 div 标签中。将元素附加到标签的语法如下所示。
appendChild(parameter);
示例 1
在下面的示例中，最初 div 部分仅包含 2 个文本。但随后，创建了一个文本并将其添加到 div 部分，如输出所示。
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var tag = document.createElement("p");
var text = document.createTextNode("Tutorix is the best e-learning platform");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 2
以下是如何向 HTML DOM 添加元素的示例程序。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>How to add a new element to HTML DOM</p>
<div id="div1">
<p id="p1">Introduction.</p>
<p id="p2">Conclusion.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("The end.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p2");
element.appendChild(para,child);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 3
以下是如何向 HTML DOM 添加元素的示例程序。这里，使用了 insertBefore() 方法 而不是 append 方法来将元素添加到 div 标签。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>How to add a new element to HTML DOM</p>
<div id="div1">
<p id="p1">Introduction.</p>
<p id="p2">Conclusion.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("To begin with...");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p2");
element.insertBefore(para,child);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
更新于：2023年9月2日
73K+ 次浏览
广告