从javascript数组创建一个html无序列表

Question

我有一点问题.我正在尝试从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>

例如,如果我发布2个名称,Name1和Name2,我的列表如下所示:

•Name1

•Name1,Name2

我希望它看起来像这样:

•Name1
•Name2

Answer 1

如果您查看代码,则只创建一个li包含所有names内容的代码.你想要做的是循环你names并li为每个创建一个单独的,对吗？

更改:

nameList += "<li>" + names + "</li>";

至:

nameList = "";
for (var i = 0, name; name = names[i]; i++) {
  nameList += "<li>" + name + "</li>";
}

如果您对一些更好的实践感兴趣,可以在这里查看您的逻辑重写:http://jsfiddle.net/rgthree/ccyo77ep/

Answer 2

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

您正在使用数组，当您打印数组时，JavaScript 将显示以逗号分隔的数组的所有条目。您需要遍历数组以使其工作。但是，您可以对此进行优化：

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

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>";
}

在此示例中，通过使用添加UL了lis（列表项）的（或无序列表）容器，HTML 在语法上是正确的。

document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>"; 

这一行选择了名称为: 的 divname及其第一个子元素 (the ul)。然后将 附加LI到列表中。

正如@FelixKling 所说：避免使用保留或不明确的名称。