如何用纯JavaScript在每X个指定div后插入额外div？

核心思路 #

先将动态获取的目标元素转为静态数组，避免DOM变化导致的索引错乱；通过从后往前循环的方式，在每第X个目标div之后插入包含段落的新容器。

完整代码示例 #

<div class="main">
  <div class="special-div">div 1</div>
  <div class="special-div">div 2</div>
  <div class="special-div">div 3</div>
  <div class="special-div">div 4</div>
  <div class="special-div">div 5</div>
</div>
<script>
  // 定义间隔数X，比如每2个special-div后插入
  const interval = 2;
  // 将动态集合转为静态数组，避免循环时DOM变化影响索引
  const specialDivs = Array.from(document.getElementsByClassName("special-div"));

  // 从后往前循环，防止插入元素打乱后续索引
  for (let i = specialDivs.length - 1; i > 0; i--) {
    // 检查当前元素是否是第X、2X...个元素（i+1是元素的实际序号）
    if ((i + 1) % interval === 0) {
      // 创建新容器div
      const insertContainer = document.createElement("div");
      // 创建段落并添加内容
      const paragraph = document.createElement("p");
      paragraph.textContent = "这是插入的段落内容";
      insertContainer.appendChild(paragraph);

      // 在当前目标div的后面插入新容器
      specialDivs[i].after(insertContainer);
    }
  }
</script>

关键细节说明 #

• 静态数组转换：getElementsByClassName返回的是动态的HTMLCollection，DOM变化时会自动更新。转为数组后可以固定初始的目标元素集合，避免循环时索引混乱。
• 从后往前循环：如果从前往后插入，新元素会导致后续目标元素的索引偏移，从后往前则不会影响前面的元素位置，逻辑更简单。
• 插入位置控制：通过(i+1) % interval === 0判断当前元素是否为间隔位置的最后一个元素，确保在它之后插入新容器。

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