Javascript：使用 appendChild 和 for 循环重新填充对象列表

Question

供参考：https://codepen.io/skypod/pen/veaRvN

phraseArray = ["hello", "hi", "bye", "goodbye"];

addPhrase = function() {
  debugger;
  var getBox = document.getElementById('paragraphBox');
  var makeParagraph = document.createElement('p');
  getBox.innerHTML = "";
    for (var i = 0; i < phraseArray.length; i++ ) {
    getBox.appendChild(makeParagraph);
    makeParagraph.innerHTML = phraseArray[i];
    }
}

所以我正努力让自己的头脑专注于在 javascript 中创建对象。

我使用的代码感觉应该清除我正在添加对象的 div，然后用一组新的对象重新填充它。

如果有人想知道，目的是让它动态地对数组中的信息更改做出反应。

现在，它只会以创建一个对象（数组中的最后一段）结束。我的印象是 for 循环应该每次都创建一个新的段落元素并将其附加到我的 div 中的最后一个元素。不过，我一定对这些功能的工作方式感到困惑。

Answer 1

您似乎只是在创建一个元素，然后尝试重新附加它。您需要在循环中执行 document.createElement('p')。

Answer 2

您并不是每次都创建新的段落元素。您正在追加相同的节点，并且因为您无法在 JavaScript 中执行此操作，所以它实际上替换了已经存在的节点。

将段落元素的创建移到循环中，它应该可以工作：

for (var i = 0; i < phraseArray.length; i++ ) {
    var makeParagraph = document.createElement('p');
    getBox.appendChild(makeParagraph);
    makeParagraph.innerHTML = phraseArray[i];
 }

举个例子：

   let phraseArray = new Array(5).fill("demo");
   let getBox = document.getElementById("paragraph-root");
   
   for (var i = 0; i < phraseArray.length; i++ ) {
        var makeParagraph = document.createElement('p');
        getBox.appendChild(makeParagraph);
        makeParagraph.innerHTML = phraseArray[i];
        }

<div id="paragraph-root"></div>

Answer 3

fixed it:

addPhrase = function() {
  debugger;
  var getBox = document.getElementById('paragraphBox');
  getBox.innerHTML = "";
    for (var i = 0; i < phraseArray.length; i++ ) {
     var makeParagraph = document.createElement('p');
    getBox.appendChild(makeParagraph);
    makeParagraph.innerHTML = phraseArray[i];  
    }
}

您的代码的问题是 makeParagraph 只创建了一次，并且您将相同的元素添加了 4 次到 getBox 元素，它不会创建新元素，它只是多次引用 1 个元素。当你在循环中创建 makeParagraph 时，它在你的案例中创建了 4 次并且在内存中有 4 个不同的位置。

Answer 4

进行以下更正：

您需要在循环内创建 p 个元素
然后你需要设置 p 的 textContent，使用 phraseArray 元素。
现在，您已经创建了一个新的 p 元素，并向其添加了 textContent，您需要使用 appendChild 将其附加到 div。

var phraseArray = ["hello", "hi", "bye", "goodbye"];

var addPhrase = function() {
  var getBox = document.getElementById('paragraphBox');
  getBox.innerHTML = "";
    for (var i = 0; i < phraseArray.length; i++ ) {
     var makeParagraph = document.createElement('p');
     makeParagraph.textContent = phraseArray[i];
      getBox.appendChild(makeParagraph);
    }
}

addPhrase();

<div id="paragraphBox"></div>

Javascript：使用 appendChild 和 for 循环重新填充对象列表

Javascript: Repopulate a list of objects with appendChild and for loop

javascript

appendchild