如何在JavaScript中向HTML DOM添加新元素?
要将新元素添加到HTMLDOM中,我们必须先创建它,然后再将其附加到现有元素上。
遵循的步骤
1)首先,创建一个div部分,并使用<p>标签向其中添加一些文本。
2)使用document.createElement(“p”)创建元素<p> 。
3)使用document.createTextNode()创建文本,以便将其插入到上面创建的element(“p”)中。
4)使用 appendChild()尝试将创建的元素以及文本附加到现有的div标签上。
因此,将创建一个新元素(<p>)并将其附加到现有元素(<div>)上。
示例
在下面的示例中,div 部分最初仅包含 2个文本。但是稍后,又创建了一个文本并将其添加到div部分,如输出所示。
<html> <body> <div id="new"> <p id="p1">Tutorix</p> <p id="p2">Nhooo</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>
输出结果
Tutorix Nhooo Tutorix is the best e-learning platform