Question

我的解决方案： https://jsfiddle.net/c96hv9tj/1/

function filler(list, arr){
    let b = document.createElement("li");

    for(let i = 0; i < arr.length; i++){
        b.appendChild(document.createTextNode(arr[i]));
    } 
    list.appendChild(b);
}

我试图让它为数组中的每个索引创建一个新的li 求助。

Answer 1

你需要把所有放在循环中，如下所示：

function filler(list, arr) {

  for (let i = 0; i < arr.length; i++) {
    let b = document.createElement("li");
    b.appendChild(document.createTextNode(arr[i]));
    list.appendChild(b);
  }

}


let ul = document.getElementById("fillthislist");
let entries = ["Shmi", "Anakin", "Luke"];

filler(ul, entries);

<section>
  <h1>Fill an empty list with the contents of an array</h1>
  <ul id=fillthislist>
  </ul>
</section>

Answer 2

为了获得更好的性能，请不要将appendChild添加到文档元素中。请改用Document Fragment。

function filler(list, listItems) {

  var fragment = document.createDocumentFragment();

  listItems.forEach(item => {
    let li = document.createElement('li');
    li.appendChild(document.createTextNode(item));
    fragment.appendChild(li);
  });

  list.appendChild(fragment);
}

由于文档片段在内存中而不是主DOM的一部分树，附加孩子不会导致页面重排（计算元素的位置和几何形状）。因此，使用文件碎片通常会带来更好的性能。

JsFiddle示例：
https://jsfiddle.net/c96hv9tj/11/

从数组中为每个索引创建一个新列表

2 个答案: