JavaScript：如何在<section>内的<button>元素前添加新的<article>元素

嘿，这个需求其实挺常见的，我给你几种靠谱的实现思路，代码都很容易理解，你可以按需选用：

方法一：使用insertBefore（最直观的经典写法） #

这种方法的核心是先找到父容器<section>和参考节点<button>，然后循环创建新的<article>，逐个插入到参考节点的前面。

// 1. 获取目标元素
const section = document.querySelector('section');
const targetButton = section.querySelector('button');

// 2. 循环创建并插入3个article
for (let i = 0; i < 3; i++) {
  // 创建新的article元素
  const newArticle = document.createElement('article');
  // 可以给新元素添加内容或属性，比如文本内容
  newArticle.textContent = `新增文章 ${i + 1}`;
  // 插入到button之前：第一个参数是要插入的元素，第二个是参考节点
  section.insertBefore(newArticle, targetButton);
}

原理：insertBefore是DOM元素的原生方法，会把新元素插入到父容器中、参考节点的直接前方，完全符合我们的位置要求。

方法二：使用insertAdjacentElement（更简洁的写法） #

这个方法可以直接以<button>为目标，指定插入位置，代码会更紧凑一些：

// 获取button元素
const targetButton = document.querySelector('section button');

// 循环创建插入
for (let i = 0; i < 3; i++) {
  const newArticle = document.createElement('article');
  newArticle.textContent = `新增文章 ${i + 1}`;
  // 'beforebegin'表示在目标元素的父容器中，插入到目标元素的前面
  targetButton.insertAdjacentElement('beforebegin', newArticle);
}

原理：insertAdjacentElement的第一个参数是位置关键字，beforebegin刚好对应“父元素内部、目标元素之前”的位置，非常贴合需求。

方法三：基于子元素索引插入（适合复杂结构场景） #

如果你的<section>内部元素结构多变，也可以先找到<button>在子元素中的索引，再精准插入：

const section = document.querySelector('section');
const targetButton = section.querySelector('button');
// 将section的子元素转换为数组，找到button的索引
const buttonIndex = Array.from(section.children).indexOf(targetButton);

for (let i = 0; i < 3; i++) {
  const newArticle = document.createElement('article');
  newArticle.textContent = `新增文章 ${i + 1}`;
  // 插入到button所在的索引位置（因为insertBefore会插到目标节点前，所以直接用索引对应的元素即可）
  section.insertBefore(newArticle, section.children[buttonIndex]);
}

注意：这种方法需要处理子元素的数组转换，因为原生的children是类数组对象，不能直接用indexOf，所以需要用Array.from转换一下。

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