通过ClassName在DOM中查找referenceNode

Question

I am attempting to do a jquery .after in pure JS.

I have the following script that works for the first div where I append by getElementById but not the second where I am using getElementsByClassName

JSFiddle

How can I successfully append by using the element's class?

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

var div2 = document.getElementsByClassName('second-div')[0];

getElementsByClassName返回一个可迭代的，因此您必须先说哪个[0]

Answer 2

getElementsByClassName returns all the elements of that class, therefore the correct way is to iterate through each item

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