javascript - 通过 ClassName 在 DOM 中查找引用节点

Question

我正在尝试在纯 JS 中执行 jquery .after。

我有以下脚本，适用于第一个 div，其中我附加了 getElementById，但不适用于我使用 getElementsByClassName 的第二个 div

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

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

getElementsByClassName 返回一个可迭代对象，因此您必须先说出哪个 [0] 为第一个