JS简单添加元素新节点的方法示例

下面我来详细讲解“JS简单添加元素新节点的方法示例”的完整攻略。

什么是添加新节点？

在 JavaScript 中，向 HTML 文档中添加节点（节点就是 HTML 元素）的过程称为添加新节点。

添加新节点的方法

使用 JavaScript 可以轻松地添加新节点到 HTML 页面中。下面我们来看看两个添加新节点的示例方法。

方法一：appendChild() 方法

appendChild() 方法是往元素的子节点列表的最后添加一个新的子节点，这个方法的语法如下：

parent.appendChild(newNode);

其中，parent 是要添加新节点的父节点，newNode 是要添加的新节点。下面就是一个使用 appendChild() 方法添加元素节点的示例：

var parent = document.getElementById("parent");
var newNode = document.createElement("li");
var textNode = document.createTextNode("新的列表项");
newNode.appendChild(textNode);
parent.appendChild(newNode);

上面这个示例中，我们首先使用 getElementById() 方法获取到 ID 为 "parent" 的父节点元素，然后创建一个新的 <li> 元素节点 newNode；接着使用 createTextNode() 方法创建一个文本节点 textNode，并将它作为 newNode 的子节点；最后使用 appendChild() 方法将 newNode 添加到 parent 节点的列表中。

方法二：innerHTML 属性

innerHTML 属性被用来修改 HTML 元素的内容。不过当你将 HTML 字符串赋值给该属性时，会以一种 HTML 解析器方式来解析这些代码，因此，你可以将任何 HTML 元素添加到页面中。下面就是一个使用 innerHTML 属性添加元素节点的示例：

var parent = document.getElementById("parent");
parent.innerHTML += '<li>新的列表项</li>';

上面这个示例中，我们同样首先获取到父节点元素 parent，然后使用 innerHTML 属性将新 <li> 元素节点以 HTML 字符串的形式添加到父节点元素中。

总结

添加新节点是 JavaScript 中非常常见的操作，在实际使用过程中我们可以根据我们需要实现的功能，选择一种最适合的方法。这里给大家介绍了两种常见的添加新节点的方法，希望对大家有所帮助。