javascript - 如何在节点后打印另一个 div 元素

Question

我试图在元素 div 后面附加另一个 div，但似乎它没有附加该元素。

Javascript:

    const divList = [
        { divv: "Div-1" },{ divv: "Div-2" },{ divv: "Div-3" },{divv: "Div-4" }
    ]; 
        function insertAfter(referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }
        for (var i = 0; i < divList.length; ++i) {                                                           
            let divi = document.createElement("div");
            let node = document.createTextNode(divList[i].divv);
            divi.appendChild(node);

            let child1 = document.getElementById("div3");               
            let child2 = child1.children[0];
            insertAfter(child2, divi);   
        }

HTML:

 <div id="div1">
      <div id="div2">This is a paragraph.</div>
      <div id="div3">This is another paragraph.</div>
    </div>

Answer 1

试试这个。

var x = 10;
const divList = [{
    divv: "Div-1"
}, {
    divv: "Div-2"
}, {
    divv: "Div-3"
}, {
    divv: "Div-4"
}];

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

for (var i = 0; i < divList.length; ++i) {
    let divi = document.createElement("div");
    let node = document.createTextNode(divList[i].divv);
    divi.appendChild(node);
    let child1 = document.getElementById("div3");
    insertAfter(divi, child1);
}

 <div id="div1">
        <div id="div2">This is a paragraph.</div>
        <div id="div3">This is another paragraph.</div>
    </div>