Question

尝试在这里使用非常简单的清洁香草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个列表项的最佳方法吗？

Answer 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中。

使用循环在list元素中创建多个列表项

1 个答案: