从数组中追加动态li

问题描述：

我被框架宠坏了，想知道普通的ol如何处理这个。基本上，我想我的JavaScript输出一个列表，其中包含我的数组中的所有项目。代码如下：从数组中追加动态li

的JavaScript

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

HTML

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

答

使用document.createElement创建元素，element.textContent文本，以填补他们parent.appendChild将其添加到它的父元件。

您还可以使用element.innerHTML或element.appendChild，而不是element.textContent如果你希望你<li>元素包含的不仅仅是纯文本更多的HTML。

下面是一个可运行的例子，根据您的代码：

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>

答

你只需要为每个项目一个DOM元素，然后该元素添加到列表中。

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>

答

尝试使用这个作为你的函数：

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/

从数组中追加动态li

相关推荐