创建 DOM 元素

创建 DOM 元素是 Web 开发中常见的操作之一。在前端开发中，我们需要动态地创建和修改 DOM 元素，以实现交互效果、更新数据等功能。本节将介绍如何使用 JavaScript 来创建 DOM 元素。

使用 createElement 方法创建元素

要创建一个新的 DOM 元素，可以使用 document.createElement() 方法。此方法接受一个参数，即要创建的元素的标签名。例如，要创建一个 div 元素，可以使用以下代码：

const divElement = document.createElement("div");

此时，divElement 就是一个全新的 div 元素，但它并没有添加到文档（现有的 HTML DOM 树）中。

使用 appendChild 方法添加子节点

通过上面的示例代码，我们已经创建了新的元素，但它并没有添加到文档中。要将它添加到文档中，可以使用 appendChild() 方法。此方法接受一个参数，即要添加的子节点。例如，将上述创建的 div 元素添加到文档中，可以使用以下代码：

const bodyElement = document.body;
bodyElement.appendChild(divElement);

此时，divElement 就被添加到了文档的 body 元素中。

使用 createTextNode 方法创建文本节点

除了元素节点，文本节点也是 DOM 中的一种节点类型。如果要在创建的元素中添加文本内容，可以创建一个文本节点，然后将其添加到元素中。创建文本节点可以使用 document.createTextNode() 方法，此方法接受一个参数，即文本节点的内容。例如，要创建一个包含文本内容的 p 元素，可以使用以下代码：

const pElement = document.createElement("p");
const textNode = document.createTextNode("这是一个段落。");
pElement.appendChild(textNode);

此时，pElement 就是一个包含文本内容的 p 元素。

使用 innerHTML 方法设置元素内容

除了使用 createTextNode() 方法创建文本节点，还可以使用 innerHTML 属性来设置元素的内容。此属性可以用于设置元素的 HTML 内容，包括文本和标签。例如，要将一个包含列表的 HTML 内容设置为一个 div 元素的内容，可以使用以下代码：

divElement.innerHTML = "<ul><li>列表项 1</li><li>列表项 2</li></ul>";

此时，divElement 就包含了一个列表，其中有两个列表项。

使用 setAttribute 方法设置属性

在创建元素时，可以使用 setAttribute() 方法来设置元素的属性。此方法接受两个参数，第一个参数是要设置的属性名，第二个参数是属性的值。例如，要给上面创建的 div 元素添加一个 class 属性，可以使用以下代码：

divElement.setAttribute("class", "container");

此时，divElement 就有了一个 class 属性，并且值为 container。

小结

本文介绍了如何使用 JavaScript 来创建 DOM 元素。通过使用 createElement() 方法和 createTextNode() 方法可以创建元素和文本节点，使用 appendChild() 方法可以将它们添加到文档中。使用 setAttribute() 方法可以设置元素的属性，使用 innerHTML 属性可以设置元素的 HTML 内容。通过这些操作，我们可以动态地创建和修改 DOM 元素，以实现更加丰富的交互效果和功能。