如何根据wrapper内.items元素数量插入对应广告DIV？

现有HTML结构：

<div class="wrapper">
  <div class="items">Item 1</div>
  <div class="items">Item 2</div>
  <div class="items">Item 3</div>
  <div class="items">Item 4</div>
  <div class="items">Item 5</div>
  <div class="items">Item 6</div>
</div>

需求：当.wrapper内的.items元素数量大于3时，插入<div class="d1">ADS</div>；当数量大于5时，插入<div class="d2">ADS</div>。请问如何实现？

这个需求用JavaScript就能轻松搞定，核心思路是先统计.items的数量，再根据数量判断要插入的广告元素，最后把它们放到指定位置。下面提供两种常用实现方式：

一、原生JavaScript实现（无框架依赖） #

直接使用浏览器原生API，兼容性好，适合大多数场景：

// 获取目标元素
const wrapper = document.querySelector('.wrapper');
const items = wrapper.querySelectorAll('.items');
const itemCount = items.length;

// 插入d1广告（当items数量>3时）
if (itemCount > 3) {
  const ad1 = document.createElement('div');
  ad1.className = 'd1';
  ad1.textContent = 'ADS';
  // 插入到第3个.items元素的后面
  wrapper.insertBefore(ad1, items[3]);
}

// 插入d2广告（当items数量>5时）
if (itemCount > 5) {
  const ad2 = document.createElement('div');
  ad2.className = 'd2';
  ad2.textContent = 'ADS';
  // 插入到第5个.items元素的后面
  wrapper.insertBefore(ad2, items[5]);
  // 若需将广告放在所有items末尾，可替换为：wrapper.appendChild(ad2);
}

关键说明： #

• querySelectorAll会返回所有匹配的.items元素，通过length属性统计数量。
• createElement用于创建新的DOM元素，设置好类名和文本内容后，用insertBefore精准控制插入位置（items[3]是第4个元素，插入到它前面就刚好在第3个items之后）。
• 如果你的items是动态渲染的（比如从接口获取数据后生成），要确保这段代码在items渲染完成后执行，否则会统计到错误的数量。

二、jQuery实现（适合已引入jQuery的项目） #

如果项目中已经使用jQuery，代码会更简洁：

const $wrapper = $('.wrapper');
const itemCount = $wrapper.find('.items').length;

// 插入d1广告
if (itemCount > 3) {
  $('<div class="d1">ADS</div>').insertAfter($wrapper.find('.items').eq(2));
}

// 插入d2广告
if (itemCount > 5) {
  $('<div class="d2">ADS</div>').insertAfter($wrapper.find('.items').eq(4));
}

关键说明： #

• eq(2)对应第3个.items元素（jQuery的索引从0开始），insertAfter方法直接将元素插入到目标元素的后方，写法更直观。

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