JavaScript - 在数据元素后添加 div

Question

我正在尝试在具有数据属性的 pre 元素之后添加一个 div。到目前为止，这就是我所拥有的:

HTML

<pre data-color="blue"></pre>
<pre data-color="blue"></pre>
<pre data-color="blue"></pre>

在 JavaScript 之后的结果应该是这样的:

HTML

<pre data-color="blue"></pre>
<div class="blue">Blue content</div>

<pre data-color="blue"></pre>
<div class="blue">Blue content</div>

<pre data-color="blue"></pre>
<div class="blue">Blue content</div>

到目前为止，我的函数如下所示:

Javascript

var blue = document.querySelectorAll("[data-color='blue']");

var insertdiv = document.createElement(div.class = 'blue', .textContent = 'Blue content.');


[].forEach.call(blue) {

  this.nextElementSibling.appendChild(insertdiv);
};

但是该功能目前无法使用。请不要使用 jQuery。

Answer 1

createElement 不是那样工作的，您创建元素然后添加属性。
此外，使用常规循环，使用空数组和 forEach.call() 不会按照您的想法进行。
您可以insertBefore nextSibling，这与不存在的insertAfter 等相同。

var blue = document.querySelectorAll("[data-color='blue']");

for (var i=blue.length; i--;) {
    var insertdiv = document.createElement('div');
    insertdiv.className   = 'blue';
    insertdiv.textContent = 'Blue content.';    

    blue[i].parentNode.insertBefore(insertdiv, blue[i].nextSibling);
}

FIDDLE