JS 将内容附加到 DOM 元素中 - Javascript

在 Web 开发中，经常需要使用 JavaScript 动态地将内容附加到 DOM 元素中。这可以通过以下方法实现：

1. 使用 innerHTML 属性

innerHTML 属性可以用来获取或设置某个元素内的 HTML 内容。可以通过将需要添加的 HTML 字符串赋值给 innerHTML 属性，将其附加到指定元素中。例如：

let element = document.getElementById('myElement');
element.innerHTML += '<p>新添加的内容</p>';

这样，就可以将一个段落元素添加到 ID 为 myElement 的元素中。

2. 使用文档片段

当需要添加多个元素时，可以使用文档片段来提高性能。文档片段是一种可以容纳多个未挂载到 DOM 中的元素的容器。通过将所有要添加的元素添加到文档片段中，最后再将整个文档片段添加到 DOM 中的指定位置，就可以减少浏览器对文档进行多次重新渲染的开销。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  let li = document.createElement('li');
  li.textContent = 'Item ' + i;
  fragment.appendChild(li);
}

let list = document.getElementById('myList');
list.appendChild(fragment);

这样，就可以将 10 个带有文本内容的列表项添加到 ID 为 myList 的列表元素中。

3. 使用 appendChild() 方法

appendChild() 方法可以将指定元素添加到另一个元素的子元素列表的末尾。例如：

let newElement = document.createElement('div');
newElement.textContent = '新添加的内容';

let parent = document.getElementById('myParent');
parent.appendChild(newElement);

这样，就可以将一个带有文本内容的 div 元素添加到 ID 为 myParent 的父元素中。

以上三种方法都可以用来将内容附加到 DOM 元素中。具体使用哪种方法，取决于具体情况和要求。例如，如果需要添加大量的元素，使用文档片段可能更加高效；如果只需要添加少量的元素，可以直接使用 innerHTML 或 appendChild() 方法。