logo标签列表

使用JavaScript创建ul和li元素。

javascript
32

我正在尝试使用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       |
 -------------

我想让我的小圆点在section标签里面。有什么办法吗？非常感谢。

2
尝试使用 list-style-position: inside 了吗？ - Eliran Malka
没错，它可行。就这么简单。Chrome和IE需要它。非常感谢。 - Rouge
这对我来说没有问题 - http://jsfiddle.net/XepXZ/1 - Alnitak
@Alnitak，没错。只需在jsFiddle上取消选中normalize CSS，我意识到这就是解决方法（通过删除所有重置样式）。 - Eliran Malka
4个回答
41

这是我的工作代码：

<!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示例，点此访问

6
尝试使用以下代码片段：
 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();
}
1
你似乎在做同样的事情多次，先使用DOM进行操作，最后再用HTML替换所有内容。 - Jean Paul
如果您调用onload函数init（），将更容易： var div = document.getElementById（“divList”）; var ul = document.createElement（'ul'）; ul.setAttribute（'id'，“ul1”）; div.appendChild（ul）;然后从按钮调用以下函数：function entry（）{ var text = prompt（“输入TODO”）; var ul = document.getElementById（“ul1”）; var li = document.createElement（“li”）; li.textContent = text; ul.appendChild（li）; } - Kardi Teknomo
5

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

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

非常好。让我们创建一个简单的函数，它接受一个数组并在 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));
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接