通過ClassName在DOM中查找referenceNode

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方法返回一個可迭代的，所以你必須說哪一個[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');