在javascript中创建ul和li元素。

问题描述：

我想通过使用javascript在我的代码中创建ul和li元素。我有以下几点：在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]; 

}

我的阵列使用json_encode从PHP

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

我希望我的分区标签内有我的点。任何想法？非常感谢。

尝试使用'list-style-position：inside'？ – 2012-07-05 19:26:25

大声笑它的工作。就那么简单。猜测Chrome和IE需要它。非常感谢。 – Rouge 2012-07-05 19:28:02

它适用于我没有 - http://jsfiddle.net/XepXZ/1 – Alnitak 2012-07-05 19:29:40

答

使用CSS财产list-style-position定位子弹：

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

答

这是我工作的代码：

<!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'); 

     var t, tt; 
     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); 

      t = document.createTextNode(element); 

      li.innerHTML=li.innerHTML + element; 
     } 
    })(); 
</script> 
</html>

工作的jsfiddle例如here

谢谢...其真正的帮助 – 2017-03-03 05:51:38

欢迎兄弟.... – 2017-03-03 05:56:18

答

我的回答

我的意思

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 + =“

”+ list [i] +“

”; }

document.getElementById（“list”）。innerHTML = letters;

函数myFunction的（）{

text = prompt("enter TODO"); 

list.push(text); 

update();

}

答

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

第1步：比方说，你有一个div与“contentSectionID”ID。<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：最后，我们选择我们的股利和在其中创建一个列表视图：

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

在javascript中创建ul和li元素。

相关推荐