ループでリスト要素に複数のリスト項目を作成する

-1

ここでは、きれいなバニラJSコードを簡単に作成しようとしています。このループは1回だけ実行されるようです。コンソールにエラーはありません。修正するために何をすべきかわからない。ループでリスト要素に複数のリスト項目を作成する

'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

ループでリスト要素に複数のリスト項目を作成する

答えて

関連する問題