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'）。

＆＃xA;

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 elemenet。当你在循环中创建makeParagraph时，它会在你的情况下创建4次，并且在内存中有4个不同的位置。

Answer 4

进行这些更正：

您需要在循环中创建p元素
然后，您需要使用phraseArray元素设置textContent p。
现在，您已经创建了一个新的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循环重新填充对象列表

4 个答案: