Trouver un referenceNode dans DOM par ClassName

Question

J'essaye de faire un jquery .after dans le JS pur.

Je le script suivant qui fonctionne pour la première div où je joins par getElementById mais pas la seconde où je me sers getElementsByClassName

JSFiddle

Comment puis-je ajouter avec succès en utilisant la classe de l'élément?

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 renvoie un itérable, donc vous devez dire lequel [0] pour la première

Answer 2

getElementsByClassName retourne tous les éléments de cette classe, donc la bonne façon est de parcourir chaque élément

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