如何在JavaScript中向HTML DOM添加新元素？

**在本文中，我们将讨论如何在JavaScript中向HTML DOM添加新元素。 **

Document对象提供了一个方法 createElement() 用于创建一个元素，以及 appendChild()方法将其添加到HTML DOM中。以下是创建HTML DOM所涉及的步骤−

第一步 − 要插入一个元素到HTML DOM中，首先，我们需要创建一个元素并将其附加到HTML DOM中。使用 document.createElement() 函数来创建HTML元素。下面是创建一个元素的语法。

document.createElement(tagName[, options]);

其中,

tagName 是要创建的标签的名称。该标签是<p>类型的。
options 参数是一个可选的元素对象。

第二步 − 在创建一个标签之后，我们需要创建一个要赋给该标签的文本。创建文本节点的语法如下所示。

Document.createTextNode("String");

第三步 − 创建文本后，我们需要将文本添加到元素 <p> 类型，最后将其添加到 div 标签中。将元素追加到标签的语法如下所示。

appendChild(parameter);

示例1

在下面的示例中，最初的div部分只包含两个文本。但是随后，又创建了一个文本并将其添加到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>

执行上述代码后，生成以下输出。