Question

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

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

Answer 2

你可以这样做。

var elems = [] ;
elems = document.getElementsByTagName("pre");

for(var i=0, i<elems.length; i++){
    var aDiv = document.createElement("div");
    aDiv.textContent = "Blue content";
    aDiv.className = "blue";
    elems[i].parentNode.insertBefore(aDiv, elems[i].nextSibling);
}

JavaScript - 在数据元素之后添加div

2 个答案: