如何用Vanilla JavaScript在页面首个h2标签前插入div？

云原生阿岚

2026-7-27

解决方法：在第一个h2标签前插入div

你的问题出在对insertBefore方法的调用对象理解错误——这个方法是目标元素的父节点的方法，不是目标元素本身的。你之前的代码是把div插到了h2标签的内部子节点里，而不是h2的前面。

下面给两种可行的实现方式：

方法1：使用标准的`insertBefore`（兼容所有浏览器）

先获取第一个h2元素，然后调用它父节点的insertBefore方法，把新div插到h2前面：

const firstH2 = document.getElementsByTagName("h2")[0];
// 先判断页面是否存在h2，避免报错
if (firstH2) {
  const divMove = document.createElement("div");
  divMove.className = "contents";
  // 调用父节点的insertBefore，参数是要插入的节点和参考节点（h2）
  firstH2.parentNode.insertBefore(divMove, firstH2);
}

方法2：使用更简洁的`before()`方法（现代浏览器推荐）

现代浏览器（Chrome、Firefox、Edge等）支持Element的before()方法，可以直接在目标元素前插入节点，代码更简洁：

const firstH2 = document.getElementsByTagName("h2")[0];
if (firstH2) {
  const divMove = document.createElement("div");
  divMove.className = "contents";
  // 直接调用h2的before方法插入div
  firstH2.before(divMove);
}