JS创建节点|极客笔记

JS创建节点

在Web开发中，经常需要通过JavaScript动态地创建、添加、修改和删除DOM节点以实现页面的交互性和动态性。这篇文章将详细介绍如何使用JavaScript创建节点，并且提供一些示例代码帮助读者理解。

创建节点的方法

在JavaScript中，我们可以使用以下几种方法来创建节点：

document.createElement(tagName): 创建一个指定类型的元素节点。
document.createTextNode(text): 创建一个包含指定文本的文本节点。
document.createDocumentFragment(): 创建一个空的文档片段，可以将多个节点添加到文档片段中，然后一次性将文档片段添加到DOM中，以提高性能。

接下来我们将详细介绍这几种方法的使用。

创建元素节点

使用document.createElement(tagName)方法可以创建一个指定类型的元素节点。例如，我们可以创建一个<div>元素节点并添加到页面中：

// 创建一个div元素节点
const div = document.createElement('div');

// 设置元素节点的一些属性
div.textContent = '这是一个div节点';
div.style.backgroundColor = 'lightblue';
div.style.padding = '10px';

// 将新创建的节点添加到页面中
document.body.appendChild(div);

上面的代码创建了一个<div>元素节点，并设置了一些样式和文本内容，然后将这个节点添加到页面中。运行代码后，页面上会新添加一个带有指定文本内容和样式的<div>元素。

创建文本节点

使用document.createTextNode(text)方法可以创建一个包含指定文本的文本节点。例如，我们可以创建一个文本节点并将其添加到一个元素节点中：

// 创建一个文本节点
const textNode = document.createTextNode('这是一个文本节点');

// 创建一个div元素节点
const div = document.createElement('div');

// 将文本节点添加到div节点中
div.appendChild(textNode);

// 将新创建的节点添加到页面中
document.body.appendChild(div);

上面的代码创建了一个文本节点，然后创建一个<div>元素节点，并将文本节点添加到该<div>元素节点中，最后将这个<div>元素节点添加到页面中。运行代码后，页面上会新添加一个带有指定文本内容的<div>元素。

创建文档片段

创建文档片段可以提高性能，因为一次性将多个节点添加到文档片段中，然后再将文档片段添加到DOM中，减少了直接操作DOM的次数。以下是一个简单的示例：

// 创建一个文档片段
const fragment = document.createDocumentFragment();

// 循环创建10个div元素节点，并添加到文档片段中
for (let i = 0; i < 10; i++) {
  const div = document.createElement('div');
  div.textContent = `这是第${i + 1}个div节点`;
  fragment.appendChild(div);
}

// 将文档片段添加到页面中
document.body.appendChild(fragment);

上面的代码创建了一个文档片段，并循环创建了10个带有不同文本内容的<div>元素节点，并将它们添加到文档片段中，最后将文档片段添加到页面中。运行代码后，页面上会依次添加10个<div>元素节点。