在前端开发中，动态地向 HTML 文档添加元素是一个很常见的操作。其中，appendChild 是最基本也是最常用的方法之一。但有时候我们需要添加多个元素，这时候该怎么办呢？本文将介绍如何使用 appendChild 来添加多个 div 元素。
什么是 appendChild？
appendChild 是 JavaScript 中一个常用的 DOM 操作方法，可以让我们将指定的节点添加到父元素的子节点列表末尾。例如：
const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);上述代码中，我们首先获取了一个 id 为 'parent' 的元素作为父元素，然后创建了一个 div 元素作为子元素，最后通过 appendChild 将子元素添加到父元素中。
添加单个 div 元素
如果只需要添加一个 div 元素，那么使用 appendChild 非常简单：
const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);上述代码中，我们首先获取了一个 id 为 'parent' 的元素作为父元素，然后创建了一个 div 元素作为子元素，最后通过 appendChild 将子元素添加到父元素中。
添加多个 div 元素
如果需要添加多个 div 元素，我们可以使用 for 循环来遍历所有 div 元素，并将它们依次添加到父元素中。例如：
const parent = document.getElementById('parent');
for (let i = 0; i < 3; i++) {
const child = document.createElement('div');
parent.appendChild(child);
}上述代码中，我们首先获取了一个 id 为 'parent' 的元素作为父元素，然后使用 for 循环遍历 3 次，每次创建一个 div 元素，最后通过 appendChild 将子元素添加到父元素中。
添加多个 div 元素（更好的性能）
如果需要添加很多个 div 元素，那么使用 for 循环的方式可能会消耗很多性能。为了提高性能，我们可以使用 DocumentFragment 对象来一次性地将所有元素添加到父元素中。例如：
const parent = document.getElementById('parent');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const child = document.createElement('div');
fragment.appendChild(child);
}
parent.appendChild(fragment);上述代码中，我们首先获取了一个 id 为 'parent' 的元素作为父元素，然后创建一个 DocumentFragment 对象。在 for 循环中，我们创建了 100 个 div 元素，并将它们添加到 DocumentFragment 对象中。最后，通过 appendChild 将 DocumentFragment 对象添加到父元素中。这种方式可以大大减少 DOM 操作次数，提高性能。
总结
在本文中，我们介绍了如何使用 appendChild 来添加多个 div 元素。如果只需要添加单个元素，这非常简单。如果需要添加多个元素，我们可以使用 for 循环或者 DocumentFragment 对象来实现。在实际开发中，我们应该根据具体情况选择最合适的方式来进行操作，以达到更好的性能和用户体验。
示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- -- --- -------- ---- ---- --------------------
-------
------
---- ------------------
--------
-- ---- --- --
----- ------- - ----------------------------------
----- ------ - ------------------------------
----------------------------
-- ---- --- ------ ---
----- -------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------