在 javascript 中创建 ul 和 li 元素

Create ul and li elements in javascript.

本文关键字：li 元素 ul 创建 javascript      更新时间：2023-09-26

我正在尝试使用javascript在我的代码中创建ul和li元素。我有以下几点：

var test=document.createElement('section');
test.setAttribute('id','test');
var ul=document.createElement('ul');

document.body.appendChild(test);
test.appendChild(ul);
for (var i=0; i<array.length; i++){
    var li=document.createElement('li');
    ul.appendChild(li);
    li.innerHTML=li.innerHTML + array[i];
}

我的数组是使用 php 中的json_encode解析

的 
array[0]='aaa';
array[1]='bbb';
array[2]='ccc';

.CSS

section { 
    display: block;
    width: 200px;
    margin: 50px auto;
    border: 3px solid red;
}

一切正常，除了列表样式点在我的部分标签之外。

它在Chrome和IE中像这样显示，但Firefox工作正常。

 -------------
*| aaa       |
*| bbb       |
*| ccc       |
 -------------

我希望我的点在我的部分标签内。有人知道吗？多谢。

这是我

的工作代码：

<!DOCTYPE html>
<html>
<head>
<style>
   ul#proList{list-style-position: inside}
   li.item{list-style:none; padding:5px;}
</style>
</head>
<body>
    <div id="renderList"></div>
</body>
<script>
    (function(){
        var ul = document.createElement('ul');
        ul.setAttribute('id','proList');
        productList = ['Electronics Watch','House wear Items','Kids wear','Women Fashion'];
        document.getElementById('renderList').appendChild(ul);
        productList.forEach(renderProductList);
        function renderProductList(element, index, arr) {
            var li = document.createElement('li');
            li.setAttribute('class','item');
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + element;
        }
    })();
</script>
</html>

在这里工作 JSFIDDLE 示例

试试下面的代码片段：

 var list = [];
 var text;
function update() {
    console.log(list);    
    for (var i = 0; i < list.length; i++) {
       console.log( i );
       var letters;
       var ul = document.getElementById("list");
       var li = document.createElement("li");
       li.appendChild(document.createTextNode(list[i]));
       ul.appendChild(li);
       letters += "<li>"  + list[i] + "</li>";
    }
 document.getElementById("list").innerHTML = letters;
}
function myFunction() {
    text = prompt("enter TODO");  
    list.push(text);
    update();
}

使用 CSS 属性list-style-position来定位项目符号：

list-style-position:inside /* or outside */;

那么太好了。让我们创建一个简单的函数，它接受一个数组并在div 标签内打印我们的有序列表视图/列表。

第 1 步：假设您有一个带有"contentSectionID"ID 的div <div id="contentSectionID"></div>。

第 2 步：然后我们创建我们的 javascript 函数，该函数返回一个列表组件并接收一个数组：

function createList(spacecrafts){
var listView=document.createElement('ol');
for(var i=0;i<spacecrafts.length;i++)
{
    var listViewItem=document.createElement('li');
    listViewItem.appendChild(document.createTextNode(spacecrafts[i]));
    listView.appendChild(listViewItem);
}
return listView;
}

第三步： 最后，我们选择我们的div 并在其中创建一个列表视图：

document.getElementById("contentSectionID").appendChild(createList(myArr));
相关文章：