リファレンスクラスをClassNameでDOM内に見つける

Question

純粋なJSでjquery .afterを実行しようとしています。

私は、第二次、私がgetElementByIdによって追加最初のdivのために働くスクリプトではなく、どこがどのように成功した要素のクラスを使用して追加することができgetElementsByClassName

JSFiddle

を使用していますか？

HTML

<div id="first-div">First Div - found by ID</div> 
<br> 
<div class="second-div">Second Div - found by ClassName</div> 

JS

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
} 

var element1 = document.createElement("div"); 
element1.className = 'row' 
element1.innerHTML = 'Text to append to first div by ID'; 
var div1 = document.getElementById('first-div'); 
insertAfter(div1, element1); 

var element2 = document.createElement("div"); 
element2.className = 'row' 
element2.innerHTML = 'Text to append to second div by class'; 
var div2 = document.getElementsByClassName('second-div'); 
insertAfter(div2, element2); 

Answer 1

を反復します

のgetElementsByClassNameは、あなたが言っているように、反復可能オブジェクトを返す1 [0]また[のgetElementsByClassNameの問題]の最初の

Answer 2

getElementsByClassName戻り、そのクラスのすべての要素、従って正しい方法は、各項目

var element2 = document.createElement("div"); 
element2.className = 'row' 
element2.innerHTML = 'Text to append to second div by class'; 
var div2 = document.getElementsByClassName("second-div"); 
for(var i = 0; i < div2.length; i++) 
{ 
    insertAfter(div2.item(i), element2); 
} 
var div2 = document.getElementsByClassName('second-div');