JS技术问题：元素后插入方法及forEach渲染商品覆盖修复

1. 如何在JavaScript中在指定元素后插入新元素？ #

根据你习惯的开发方式，这里提供两种常用实现方案：

原生JavaScript实现 #

• 方法一：用insertAdjacentElement()直接插入
  这是最直观的方式，给目标元素调用该方法，指定插入位置为'afterend'即可：

  const targetEl = document.getElementById('target');
  const newEl = document.createElement('div');
  newEl.textContent = '我是新插入的元素';
  targetEl.insertAdjacentElement('afterend', newEl);
  

• 方法二：通过父元素的insertBefore()间接插入
  利用目标元素的下一个兄弟节点作为参考，插入到它前面，等同于在目标元素后追加：

  const targetEl = document.getElementById('target');
  const newEl = document.createElement('div');
  newEl.textContent = '我是新插入的元素';
  targetEl.parentNode.insertBefore(newEl, targetEl.nextSibling);
  

jQuery实现 #

如果你的项目已经引入jQuery，直接用after()方法更简洁，支持传入DOM元素或HTML字符串：

// 插入DOM元素
const newEl = $('<div>我是新插入的元素</div>');
$('#target').after(newEl);

// 直接插入HTML字符串
$('#target').after('<div>我是新插入的元素</div>');

2. 商城商品渲染forEach函数覆盖问题修复 #

问题根源 #

你的代码现在只显示最后一个商品，核心问题有两个：

1. 每次循环都用document.getElementById('Collection').innerHTML = '...'直接覆盖容器的全部内容，而不是追加；
2. 变量content每次被赋值为当前单个商品的HTML，最后只会保留数组最后一个元素的内容。

修复后的代码方案 #

这里给你两种可行的修复方式，按需选择即可：

方案一：累加HTML字符串后一次性插入

适合商品数量不多的场景，减少DOM操作次数：

<body>
  <div id="Collection" style="padding: 20vh 5% 5% 5%;"></div>
</body>
<script>
var ItemCollection = [
  {Name:'ivy',Price:'200$',Picture:''},
  {Name:'eyvo',Price:'300$',Picture:''},
  {Name:'leevo',Price:'400$',Picture:''},
];

// 初始化空字符串，用于累加所有商品的HTML
let content = '';
ItemCollection.forEach(generateItem);
// 最后一次性插入到容器
$('#Collection').append(content);

function generateItem(item) {
  // 使用模板字符串拼接，注意用 += 累加而不是 = 覆盖
  content += `
    <li class="Shoe">
      <a href="#${item.Name}">
        <div>
          <img class="ItemPicture" src="https://assets.adidas.com/images/w_385,h_385,f_auto,q_auto: sensitive,fl_lossy/1783d3e50c9249ab8f75ab280102cb94_9366/ivy-park-nite-jogger-shoes.jpg">
        </div>
        <div class="ItemInfo">
          <p>${item.Name}</p>
          <p>${item.Price}</p>
        </div>
      </a>
    </li>
  `;
}
</script>

方案二：每次循环直接追加到容器

更适合商品数量较多的场景，避免大量字符串拼接的性能损耗：

<body>
  <div id="Collection" style="padding: 20vh 5% 5% 5%;"></div>
</body>
<script>
var ItemCollection = [
  {Name:'ivy',Price:'200$',Picture:''},
  {Name:'eyvo',Price:'300$',Picture:''},
  {Name:'leevo',Price:'400$',Picture:''},
];

// 直接在forEach里逐个追加商品HTML
ItemCollection.forEach(generateItem);

function generateItem(item) {
  const itemHtml = `
    <li class="Shoe">
      <a href="#${item.Name}">
        <div>
          <img class="ItemPicture" src="https://assets.adidas.com/images/w_385,h_385,f_auto,q_auto: sensitive,fl_lossy/1783d3e50c9249ab8f75ab280102cb94_9366/ivy-park-nite-jogger-shoes.jpg">
        </div>
        <div class="ItemInfo">
          <p>${item.Name}</p>
          <p>${item.Price}</p>
        </div>
      </a>
    </li>
  `;
  // 每次循环都把当前商品的HTML追加到容器，不会覆盖已有内容
  $('#Collection').append(itemHtml);
}
</script>

关键修改点说明 #

• 替换了innerHTML =这种覆盖式赋值，改用+=累加或者直接append；
• 使用ES6模板字符串（``）替代繁琐的字符串拼接，代码可读性更强；
• 删除了原函数中多余的item变量重定义（原代码function generateItem(item, index,){ var body,item, ...}会导致参数被覆盖）。

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