JavaScript - 데이터 요소 뒤에 div 추가

Question

데이터 속성이있는 pre 요소 다음에 div을 추가하려고합니다. 지금까지, 이것은 내가 무엇을 가지고 :

HTML

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

결과를, 자바 스크립트는이해야 후 :

<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> 

지금까지

HTML 내 함수는 다음과 같습니다.

함수가 순간에 작동하지 않습니다 그러나

자바 스크립트

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()은 생각하는 것을 수행하지 않습니다.
그리고 당신은 사용 JQuery와 follwing을 같이 해보십시오 존재하지 않는 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

을와 동일 할 것 nextSibling, insertBefore 수 있습니다

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); 
}