Javascript 从javascript数组制作一个html无序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28677745/
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
Make a html unordered list from javascript array
提问by marcel jager
I'm having a bit of a problem. I'm trying to create a unordered list from a javascript array, here is my code:
我有点问题。我正在尝试从 javascript 数组创建一个无序列表，这是我的代码：
var names = [];
var nameList = "";
function submit()
{
var name = document.getElementById("enter");
var theName = name.value;
names.push(theName);
nameList += "<li>" + names + "</li>";
document.getElementById("name").innerHTML = nameList;
}
<input id="enter" type="text">
<input type="button" value="Enter name" onclick="submit()">
<br>
<br>
<div id="name"></div>
For example, if I post 2 names, Name1and Name2my list looks like this:
例如，如果我发布 2 个名称Name1和Name2，我的列表如下所示：
?Name1
?Name1,Name2
I want it to look like this:
我希望它看起来像这样：
?Name1
?Name2
回答by rgthree
If you look at your code, you are only creating one liwith all your namesas the content. What you want to do is loop over your namesand create a separate lifor each, right?
如果您查看您的代码，您只是在创建一个li以您names的所有内容为内容的代码。您想要做的是循环names并li为每个创建一个单独的，对吗？
Change:
改变：
nameList += "<li>" + names + "</li>";
to:
到：
nameList = "";
for (var i = 0, name; name = names[i]; i++) {
nameList += "<li>" + name + "</li>";
}
If you are interested in some better practices, you can check out a rewrite of your logic here: http://jsfiddle.net/rgthree/ccyo77ep/
如果你对一些更好的实践感兴趣，你可以在这里查看你的逻辑的重写：http: //jsfiddle.net/rgthree/ccyo77ep/
回答by Mouser
function submit()
{
var name = document.getElementById("enter");
var theName = name.value;
names.push(theName);
document.getElementById("name").innerHTML = "";
for (var I = 0; I < names.length; I++)
{
nameList = "<li>" + names[I] + "</li>";
document.getElementById("name").innerHTML += nameList;
}
}
You are using an array, when you print an array JavaScript will show all the entries of the array separated by commas. You need to iterate over the array to make it work. However you can optimize this:
您正在使用数组，当您打印数组时，JavaScript 将显示以逗号分隔的数组的所有条目。您需要遍历数组以使其工作。但是，您可以对此进行优化：
var names = [];
function displayUserName()
{
var theName = document.getElementById("enter").value;
if (theName == "" || theName.length == 0)
{
return false; //stop the function since the value is empty.
}
names.push(theName);
document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
}<input id="enter" type="text">
<input type="button" value="Enter name" onclick="displayUserName()">
<br>
<br>
<div id="name"><ul></ul></div>In this example the HTML is syntactically correct by using the UL(or unordered list) container to which the lis (list items) are added.
在此示例中，通过使用添加UL了lis（列表项）的（或无序列表）容器，HTML 在语法上是正确的。
document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
This line selects the div with the name: nameand its first child (the ul). It then appends the LIto the list.
这一行选择了名称为: 的 divname及其第一个子元素 (the ul)。然后将 附加LI到列表中。
As @FelixKling said: avoid using reserved or ambiguous names.
正如@FelixKling 所说：避免使用保留或不明确的名称。
回答by David Cameron
<div>
<label for="new-product">Add Product</label><br /><br /><input id="new-product" type="text"><br /><br /><button>Add</button>
</div>
<div>
<ul id="products">
</ul>
<p id="count"></p>
</div>
var products = [];
var productInput = document.getElementById("new-product");
var addButton = document.getElementsByTagName("button")[0];
var productListHtml = "";
var abc = 0;
addButton.addEventListener("click", addProduct);
function addProduct() {
products.push(productInput.value);
productList();
}
function productList() {
productListHtml += "<li>" + products[abc] + "</li>";
document.getElementById("products").innerHTML = productListHtml;
abc++;
}
