DOM加载完成时使用JavaScript向父容器多次追加子div元素的实现方法

基础HTML结构 #

页面中先预留父容器：

<div class="parent_element"></div>

JavaScript实现代码 #

常规版本（适合插入数量<100的场景） #

// 自定义需要生成的子元素数量，此处对应示例中的5个
const INSERT_TIMES = 5;

document.addEventListener('DOMContentLoaded', function() {
  // 获取父容器节点
  const parentEl = document.querySelector('.parent_element');
  // 父容器不存在时直接退出避免报错
  if (!parentEl) return;

  for (let i = 0; i < INSERT_TIMES; i++) {
    // 创建子div节点
    const childEl = document.createElement('div');
    // 添加指定class
    childEl.classList.add('child_element');
    // 插入到父容器末尾
    parentEl.appendChild(childEl);
  }
});

高性能版本（适合插入数量大的场景） #

如果需要插入的子元素数量很大，使用文档片段减少页面重排次数，提升性能：

const INSERT_TIMES = 5;

document.addEventListener('DOMContentLoaded', function() {
  const parentEl = document.querySelector('.parent_element');
  if (!parentEl) return;

  // 创建文档片段，暂存所有子节点
  const tempFragment = document.createDocumentFragment();
  for (let i = 0; i < INSERT_TIMES; i++) {
    const childEl = document.createElement('div');
    childEl.classList.add('child_element');
    tempFragment.appendChild(childEl);
  }
  // 一次性将所有子节点插入父容器
  parentEl.appendChild(tempFragment);
});

修改INSERT_TIMES变量的值即可自定义生成的子元素数量，最终生成的DOM结构和你给出的预期结构完全一致。

内容的提问来源于stack exchange，提问作者Prabich Shakya