在 javascript 中创建 ul 和 li 元素。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11351135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create ul and li elements in javascript.
提问by Rouge
I am trying to create ul and li element in my codes by using javascript. I have following:
我正在尝试使用 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];
}
My array is parsed using json_encode from php
我的数组是使用 php 中的 json_encode 解析的
array[0]='aaa';
array[1]='bbb';
array[2]='ccc';
CSS
CSS
section {
display: block;
width: 200px;
margin: 50px auto;
border: 3px solid red;
}
Everything works fine except the list style dot is outside of my section tag.
一切正常，除了列表样式点在我的部分标签之外。
It displays like this in Chrome and IE but firefox work fine.
它在 Chrome 和 IE 中显示为这样，但 firefox 工作正常。
-------------
*| aaa |
*| bbb |
*| ccc |
-------------
I want my dot inside my section tag. Anyone idea? Thanks a lot.
我希望我的点在我的部分标签中。任何人的想法？非常感谢。
采纳答案by xandercoded
Use the CSSproperty list-style-positionto position the bullet:
使用该CSS属性list-style-position来定位项目符号：
list-style-position:inside /* or outside */;
回答by Sunny S.M
Here is my working code :
这是我的工作代码：
<!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>
working jsfiddle example here
在这里工作 jsfiddle 示例
回答by Oclemy
Great then. Let's create a simple function that takes an array and prints our an ordered listview/list inside a div tag.
那很好。让我们创建一个简单的函数，它接受一个数组并在 div 标签内打印我们的有序列表视图/列表。
Step 1: Let's say you have an div with "contentSectionID" id.<div id="contentSectionID"></div>
第 1 步：假设您有一个带有“contentSectionID”ID 的 div。<div id="contentSectionID"></div>
Step 2: We then create our javascript function that returns a list component and takes in an array:
第 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;
}
Step 3: Finally we select our div and create a listview in it:
第 3 步：最后我们选择我们的 div 并在其中创建一个列表视图：
document.getElementById("contentSectionID").appendChild(createList(myArr));
回答by sanjar
Try out below code snippet:
试试下面的代码片段：
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();
}
