Question

我有一个真正的新手问题：

我有这个for循环：

var pNewTag = document.createElement('p');
var grabWrapper = document.querySelector('.footerInfo');
var myArray = grabWrapper.children;

 for ( var i = 0; i < myArray.length; i++ ) {
   grabWrapper.children[i].appendChild(pNewTag);
   pNewTag.innerHTML = " this works ";
 }

我正在使用的数组长度为7，但循环只执行appendChild一次。我希望它能在每次迭代中运行。我错过了什么？

Answer 1

那是因为你只有一个元素，并且你继续移动它，你必须为每次迭代创建一个元素

var grabWrapper = document.querySelector('.footerInfo');
var myArray = grabWrapper.children;

for ( var i = 0; i < myArray.length; i++ ) {
   var pNewTag = document.createElement('p');
   pNewTag.innerHTML = " this works ";

   grabWrapper.children[i].appendChild(pNewTag);
}

Answer 2

您必须创建多个p - 元素：

var grabWrapper = document.querySelector('.footerInfo');
var myArray = grabWrapper.children;

for ( var i = 0; i < myArray.length; i++ ) {
    var pNewTag = document.createElement('p');
    pNewTag.innerHTML = " this works ";
    grabWrapper.children[i].appendChild(pNewTag);
}

尝试在将元素添加到文档之前填充元素。这样您的浏览器就不必重复文档两次。

数组迭代只执行一次appendChild

2 个答案: