如何在 JavaScript 中动态创建新元素？

在 JavaScript 中，我们可以使用 DOM（文档对象模型） 来动态地创建新元素。DOM 是一种将 HTML 文档视为树形结构的方式，每个 HTML 元素都是树的节点。我们可以使用 DOM 操作树来添加、删除或修改 HTML 元素。

创建元素的方法

JS 中有多种方式可以创建新元素，以下是其中两种常见的方法：

方法 1：document.createElement()

这是一种创建新元素的最常见方式，我们可以通过指定元素的节点名称来创建新元素：

// 创建一个新的 <div> 元素
const newDiv = document.createElement('div');

方法 2：document.createDocumentFragment()

另一种创建新元素的方法是使用文档片段（document fragment）。文档片段是 DOM 中的一个容器，可以用来存储一组节点，而不会在 DOM 中创建额外的层次结构。我们可以把多个元素添加到一个文档片段中，然后将文档片段添加到文档的特定位置。

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

// 在文档片段中创建新的 <div> 元素
const newDiv = document.createElement('div');
myFragment.appendChild(newDiv);

// 将文档片段添加到页面中
const container = document.querySelector('.container');
container.appendChild(myFragment);

使用新元素

一旦我们创建了新元素，我们就可以对它进行操作并将其添加到我们的 HTML 页面中，例如：

// 给新元素添加文本
newDiv.textContent = 'This is a new div';

// 将新元素追加到某个现有元素中
const existingElement = document.querySelector('.existing');
existingElement.appendChild(newDiv);

// 更改样式或属性
newDiv.style.backgroundColor = 'red';
newDiv.setAttribute('title', 'New div');

总结

创建新元素是 JavaScript 中 DOM 操作的基础。我们可以使用 document.createElement() 或 document.createDocumentFragment() 方法来创建新元素，并用其他 DOM 操作来操作和使用它们。