在javascript中创建ul和li元素。
在javascript中创建ul和li元素。
提问于 2012-07-06 03:22:38
我正在尝试使用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 |
-------------我想要我的点在我的区段标签里。有谁知道吗？非常感谢。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-07-06 03:26:27
使用CSS属性list-style-position来定位项目符号：
list-style-position:inside /* or outside */;Stack Overflow用户
发布于 2015-08-07 17:03:29
以下是我的工作代码：
<!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
Stack Overflow用户
发布于 2016-12-24 18:06: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 += "<li>" + list[i] + "</li>";
}
document.getElementById("list").innerHTML = letters;
}
function myFunction() {
text = prompt("enter TODO");
list.push(text);
update();
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11351135
复制相关文章
相似问题