在javascript中创建ul和li元素。

时间:2012-07-05 19:22:38

标签: javascript

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

我想在我的section标签中找到我的点。谁有想法?非常感谢。

4 个答案:

答案 0 :(得分:17)

这是我的工作代码:

<!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示例here

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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

第1步:让我们说你有一个div&#34; contentSectionID&#34;标识。<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));

答案 3 :(得分:0)

我的回答

我的意思是

 var list = [];

 var text;

function update(){     的console.log(列表);

 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(列表[1]));

ul.appendChild(LI);

字母+ =“

  • ”+ list [i] +“
  • ”;     }

    document.getElementById(“list”)。innerHTML = letters;

    }
    

    function myFunction(){

    text = prompt("enter TODO");  
    
    list.push(text);
    
    update();
    

    }