如何在 JavaScript 中向 HTML DOM 添加新元素?
javascriptweb developmentfront end technology
在本文中,我们将讨论如何在 JavaScript 中向 HTML DOM 添加新元素。
Document 对象提供了 createElement() 方法来创建元素,以及 appendChild() 方法将其添加到 HTML DOM。以下是创建 HTML DOM 所涉及的步骤 -
步骤 1 - 要将元素插入 HTML DOM,首先,我们需要创建一个元素并将其附加到 HTML DOM。document.createElement() 用于创建 HTML 元素。创建元素的语法如下所示。
document.createElement(tagName[, options]);
其中,
tagName 是要创建的标签的名称。该标签属于 <p> 类型。
options param 是可选元素对象。
步骤 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>
执行上述代码后,将生成以下输出。