配列から動的liを追加します

Question

私はフレームワークによって甘やかされており、どのようにプレーンオール 'Javascriptがこれを処理するかを知りたいと思います。基本的には、自分のJavaScriptから、配列のすべての項目を含むリストを出力したいと思います。コードは以下の通りである：

javascriptの

function addrain(){ 
    var element = ['apple', 'orange', 'banana']; 
    for (var i = 0; i < element.length; i++){ 
    //what goes here??// 
    document.getElementById('listcontent').append... 
}); 
} 

その親に追加するには、テキストとparent.appendChildでそれらを埋めるための要素、element.textContentを作成するためのHTML

<ul id="listcontent"></ul> 

Answer 1

使用document.createElement素子。

あなただけのプレーンテキストよりも多くのHTMLが含まれているために、あなたの<li>要素をたい場合は、代わりにelement.textContentのelement.innerHTMLまたはelement.appendChildを使用することができます。

はここにあなたのコードに基づいて、実行可能な例です：あなたは、各項目のDOM要素を作成し、あなたのリストにその要素を追加する必要が

function addrain() { 
 
    var element = ['apple', 'orange', 'banana']; 
 
    for (var i = 0; i < element.length; i++) { 
 
    // Create DOM element 
 
    var li = document.createElement('li'); 
 
     
 
    // Set text of element 
 
    li.textContent = element[i]; 
 

 
    // Append this element to its parent 
 
    document.getElementById('listcontent').appendChild(li); 
 
    } 
 
} 
 

 
addrain();

<ul id="listcontent"></ul>

Answer 2

。

function addrain(){ 
 
    var element = ['apple', 'orange', 'banana']; 
 
    for (var i = 0; i < element.length; i++){ 
 

 
     // Create DOM element 
 
     let childNode = document.createElement('li'); 
 

 
     // Set content to current element 
 
     childNode.innerHTML = element[i]; 
 

 
     // Add DOM Node to list 
 
     document.getElementById('listcontent').appendChild(childNode); 
 
    } 
 
} 
 

 
addrain();

<ul id="listcontent"></ul>

Answer 3

あなたの関数としてこれを使用してみてください：

function addrain(){ 
    var element = ['apple', 'orange', 'banana']; 
    for (var i = 0; i < element.length; i++){ 
     var li = document.createElement('li'); // Create an <li> 
     li.appendChild(document.createTextNode(element[i])); // Add the name of the fruit 
     document.getElementById('listcontent').appendChild(li); // Append the <li> to the <ul> 
    } 
} 

https://jsfiddle.net/xcqegL3b/