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

-1

试图在这里有非常简单的干净的香草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个列表项的最佳方式？

来源

2017-02-24 sol acyon

您必须每次都创建一个全新的'li'元素，否则您必须克隆它。因为每次你重新添加相同的元素（剪切并追加它）。 –

@ibrahimmahrir我想这可能是这样的。不太确定如何继续。我必须使用'new'关键字吗？ –

你需要每次创建它就像你在d.createElement – JEY

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

来源

2017-02-24 16:50:14

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

回答

相关问题