使用循环在列表元素中创建多个列表项[重复]答案

【问题标题】：Creating multiple list items in list element with a loop [duplicate]使用循环在列表元素中创建多个列表项[重复]
【发布时间】：2017-02-24 16:44:22
【问题描述】：

尝试在这里编写非常简单干净的香草 JS 代码。这个循环似乎只运行一次。控制台没有错误。不知道该怎么做才能修复。

'use strict';
function start(){
  var d = document, 
      main = d.getElementsByTagName('main')[ 0 ],
      ul = d.createElement( 'ul' ),
      li = d.createElement( 'li' ),
      textContent = d.createTextNode( 'Item ' ),
      i;
  
  main.appendChild( ul );
  li.appendChild( textContent );
  
  for( i = 0; i <= 9; i = i + 1 ){
    ul.appendChild( li );
  }
}
start();

<!DOCTYPE html>
<html>
  <body>
    <main>
    </main>
  </body>
</html>

似乎正在发生的事情是appendChild 只是一遍又一遍地附加一个列表元素，只是替换它自己。我见过一些这样的例子，他们使用new 关键字，但我读过反对的文章。知道从这个循环中获取 ul 元素中的 10 个列表项的最佳方法吗？

【问题讨论】：

您必须每次都创建一个全新的li 元素，否则您必须克隆它。因为每次您重新附加相同的元素（将其剪切并附加）。
@ibrahimmahrir 我想可能是这样。不太确定如何进行。我必须使用new 关键字吗？
你需要每次都创建它，就像你在 d.createElement 开始时所做的那样

标签： javascript html loops for-loop

【解决方案1】：

'use strict';
function start(){
  var d = document, 
      main = d.getElementsByTagName('main')[ 0 ],
      ul = d.createElement( 'ul' ),
      i;
  
  main.appendChild( ul );
  
  
  for( i = 0; i <= 9; i = i + 1 ){
    var li = d.createElement( 'li' );               // create a new li element
    li.textContent = "Item " + (i+1);               // .textContent is mush shorter than creating a textNode
    ul.appendChild( li );                           // every time append a new item
  }
}
start();

<!DOCTYPE html>
<html>
  <body>
    <main>
    </main>
  </body>
</html>

每次var li 被求值时，对旧 li 元素的引用被销毁并创建一个新元素（其引用存储在变量li 中）。引用的销毁并不意味着 li 元素本身被销毁，它只是意味着变量li 被重新创建并引用了一个新的 li 元素，旧元素仍在 DOM 中。

【讨论】：