javascript 在页面上的第一个h2之前插入div

3htmauhk  于 2023-03-21  发布在  Java
关注(0)|答案(3)|浏览(95)

我尝试使用Vanilla Javascript在H2标记前插入一个节点。我以为insertBefore是我想要的,但我可能错了。

const nodes = document.getElementsByTagName("h2");
            divMove = document.createElement("div");
            divMove.className = "contents";
            nodes[0].insertBefore(divMove, nodes[0]);

我应该使用什么javascript命令在页面上的第一个h2之前插入一个div。任何帮助都是感激的。它发生在多个页面上,其中h2 id不会相同。

ijnw1ujt

ijnw1ujt1#

你的代码很接近。缺少的一点是Node.insertBefore()是一个需要在目标的 * 父节点 * 上调用的方法:
Node接口的insertBefore()方法在 reference node 之前插入一个节点,作为指定 parent node 的子节点。

const nodes = document.getElementsByTagName("h2");
divMove = document.createElement("div");
divMove.textContent = "div text";
nodes[0].parentNode.insertBefore(divMove, nodes[0]);
//      ^^^^^^^^^^^
<div>
  <h2>First</h2>
  <h2>Second</h2>
<div>
djmepvbi

djmepvbi2#

您可以使用element.insertAdjacentHTML()缩短练习:

document.querySelector("h2").insertAdjacentHTML("beforebegin",`<div class="contents">This is the inserted div.</div>`);
<H2>My heading</H2>
<H2>Another heading</H2>
nkhmeac6

nkhmeac63#

可以使用Element#before代替,更加方便直观,这种方法直接在指定元素前插入节点;根本不需要考虑父。

const div = document.createElement('div');
div.className = 'contents';
div.textContent = 'div text';
document.querySelector('h2').before(div);
<h2>h2 title</h2>
<h3>h3 title</h3>
<h2>another h2 title</h2>

相关问题