通过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');