javascript - 我如何修复我的代码以将每个段落放在一个新行中，因为我试图在给定段落之前添加段落

Question

我试图在 HTML 中的段落之前添加段落，但不知何故，代码没有在换行符中打印它们。我需要将它们打印为:

第 1 段

第 2 段

第 3 段

第 4 段

相反，它在一行中打印为:Para-1Para-2Para-3Para-4

  const paraList = [
        {
            par: "Para-1",
        },
        {
            par: "Para-2",
        },
        {
            par: "Para-3",                                                                                                                      
        },
        {
            par: "Para-4",
        },
    ];
    
    let para = document.createElement("p");
    for (var i = 0; i < paraList.length; ++i) {
        let node = document.createTextNode(paraList[i].par);
        para.appendChild(node);

        let element = document.getElementById("div1");
        let child = document.getElementById("p1");
        element.insertBefore(para,child);
    }
 

 <div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
</div>

Answer 1

如果要为列表中的每个元素创建一个新段落，则应该每次都创建一个新元素，因此请将声明放入循环内，如下所示:

const paraList = [
    {
        par: "Para-1",
    },
    {
        par: "Para-2",
    },
    {
        par: "Para-3",                                                                                                                      
    },
    {
        par: "Para-4",
    },
];
    
for (var i = 0; i < paraList.length; ++i) {
    let para = document.createElement("p");
    let node = document.createTextNode(paraList[i].par);
    para.appendChild(node);

    let element = document.getElementById("div1");
    let child = document.getElementById("p1");
    element.insertBefore(para,child);
}

<div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
</div>