我如何修復我的代碼以將每個段落放在一個新行中，因為我試圖在給定段落之前添加段落

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>