在javascript中創建ul和li元素。

Question

我試圖通過使用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;

}

一切正常，除了列表樣式點在我的section標簽之外。

它在Chrome和IE中顯示如下，但firefox工作正常。

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

我希望我的部分標記內的點。 誰有想法？ 非常感謝。

Answer 1

這是我的工作代碼：

<!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的例子

Answer 2

使用CSS屬性list-style-position來定位項目符號：

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

Answer 3

那很好。 讓我們創建一個簡單的函數，它接受一個數組並在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;
}

第3步：最后我們選擇我們的div並在其中創建一個列表視圖：

document.getElementById("contentSectionID").appendChild(createList(myArr));

Answer 4

試試下面的代碼片段：

 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();
}

在javascript中創建ul和li元素。

問題描述

4 個解決方案

解決方案1
20 2015-08-07 09:03:28

解決方案2
4 已采納 2012-07-05 19:26:27

解決方案3
1 2017-08-10 05:57:52

解決方案4
0 2016-12-24 10:06:18

在javascript中創建ul和li元素。

問題描述

4 個解決方案

解決方案1 20 2015-08-07 09:03:28

解決方案2 4 已采納 2012-07-05 19:26:27

解決方案3 1 2017-08-10 05:57:52

解決方案4 0 2016-12-24 10:06:18

解決方案1
20 2015-08-07 09:03:28

解決方案2
4 已采納 2012-07-05 19:26:27

解決方案3
1 2017-08-10 05:57:52

解決方案4
0 2016-12-24 10:06:18