ページロード時に動的に作成されたリストをロードする

Question

動的リストを作成しようとしていますが、ページが読み込まれたときにロードしようとしています。私はスクリプトを書いてそれをテストしましたが、何らかの理由で動作していないようです。

CODE

<script> 
    var fruits = ["apple","pear","banana","orange"]; 

    function showList(){ 
    list = document.createElement("LI"); 
    list.setAttribute("href","#"); 
    for(i=0;i<fruits.length;i++){ 
     list = fruits[i]; 
    } 


    } 

    </script> 

    <ul id="list-container" onload="showList();"> 


    </ul> 

あなたはwindow.onloadイベントと連携し、以下のとおりループに内部要素の作成コードを移動する必要がフィドル https://jsfiddle.net/88vo6vb8/

Answer 1

Here is the fiddle と以下のコードスニペット。 @ Shalitha Surangaの答えに基づいて、私は少し追加しました。あなたがDOMにリスト項目を追加し、代わりに `window.onload`を使用して、関数を呼び出している

<script> 
 
var fruits = ["apple","pear","banana","orange"]; 
 

 
window.onload =() => { 
 
    for(let i=0;i<fruits.length;i++){ 
 
    \t liA=document.createElement("a"); 
 
    liA.setAttribute("href","#"); 
 
    list = document.createElement("LI"); 
 
    list.innerHTML = fruits[i]; 
 
    liA.appendChild(list); 
 
    document.getElementById('list-container').appendChild(liA); 
 
    } 
 

 

 
} 
 

 
</script> 
 

 
<ul id="list-container"> 
 
    
 
    
 
</ul>

Answer 2

。また、それぞれli要素のテキストを設定するのにelement.innerHTMLを使用してください。

<script> 
 
var fruits = ["apple","pear","banana","orange"]; 
 

 
window.onload =() => { 
 
    for(let i=0;i<fruits.length;i++){ 
 
    list = document.createElement("LI"); 
 
    list.setAttribute("href","#"); 
 
    list.innerHTML = fruits[i]; 
 
    document.getElementById('list-container').appendChild(list); 
 
    } 
 

 

 
} 
 

 
</script> 
 

 
<ul id="list-container"> 
 
    
 
    
 
</ul>