Javascript 从数组中追加动态li

我已经被框架宠坏了，我想知道纯ol'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...
});
}

函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（var i=0；i

html

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

用于创建元素、用文本填充元素并将其添加到其父元素中

如果希望

元素包含的HTML多于纯文本，也可以使用或代替

下面是一个基于您的代码的可运行示例：

函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（变量i=0；i
用于创建元素、用文本填充元素并将其添加到其父元素中

如果希望
元素包含的HTML多于纯文本，也可以使用或代替

下面是一个基于您的代码的可运行示例：


函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（变量i=0；i
您只需要为每个项目创建一个DOM元素，然后将该元素附加到列表中


函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（var i=0；i
您只需要为每个项目创建一个DOM元素，然后将该元素附加到列表中


函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（var i=0；i
尝试使用此功能：

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>
    }
}

函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（var i=0；i
li.appendChild（document.createTextNode（元素[i]）；//添加水果的名称
document.getElementById（'listcontent'）.appendChild（li）；//将
附加到

}
}

尝试使用此功能：

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>
    }
}

函数addrain（）{
var元素=[‘苹果’、‘橘子’、‘香蕉’]；
对于（var i=0；i
li.appendChild（document.createTextNode（元素[i]）；//添加水果的名称
document.getElementById（'listcontent'）.appendChild（li）；//将
附加到

}
}


const元素=[“橙色”、“苹果”、“香蕉”]；
const list_element_to_insert=document.getElementById（'listcontent'）；//获取html元素
//我首先使用映射来创建li元素。然后转换
//通过联接将映射列表返回到字符串中
列出要插入的元素。innerHTML=`${elements.map（element=>`
${element}
`）

const元素=[“橙色”、“苹果”、“香蕉”]；
const list_element_to_insert=document.getElementById（'listcontent'）；//获取html元素
//我首先使用映射来创建li元素。然后变换
//通过联接将映射列表返回到字符串中
列出要插入的元素。innerHTML=`${elements.map（element=>`
${element}
`）