如何在JavaScript的forEach调用中重排元素，实现随机顺序插入段落？

首先修正你原有代码的一个小错误：document.querySelector(".paragraph")只会返回第一个匹配类名的段落元素，你需要用document.querySelectorAll(".paragraph")才能拿到全部3个原始段落。
要实现随机顺序插入，你只需要把获取到的段落集合转成数组后做随机打乱，再遍历插入即可，推荐使用随机性更稳定的Fisher-Yates洗牌算法实现打乱，完整代码如下：

const body = document.querySelector("#body");
// 修正：获取所有段落元素
const paragraphs = document.querySelectorAll(".paragraph");
const btnHitMe = document.querySelector("#btn");

const addParagraphs = () => {
  // 把节点集合转成普通数组，方便后续打乱
  let paragraphArr = Array.from(paragraphs);
  // Fisher-Yates洗牌算法打乱数组顺序
  for (let i = paragraphArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [paragraphArr[i], paragraphArr[j]] = [paragraphArr[j], paragraphArr[i]];
  }
  // 遍历打乱后的数组，复制插入
  paragraphArr.forEach(el => {
    const node = document.createElement("p");
    node.innerHTML = el.innerHTML;
    body.insertBefore(node, btnHitMe);
  });
}

实现说明 #

• 不推荐使用arr.sort(() => Math.random() - 0.5)实现打乱，该方法依赖浏览器的sort实现逻辑，随机分布不均匀，部分场景下会出现固定位置元素不变的问题
• Fisher-Yates算法通过从后往前遍历数组，每次随机交换当前元素和前面任意位置元素的位置，保证每个元素出现在任意位置的概率均等

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