用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

- marcel jager

---

顺便提一下：不要在内联事件处理程序中使用名为“submit”的自定义函数。一旦将元素放入表单中，“submit”将引用<form>元素的提交方法。此外，您的div元素应该是一个ul元素。 - Felix Kling

Answer 1

如果您查看代码，您只创建了一个包含所有名称的

标签。您想要做的是循环遍历您的名称，并为每个名称创建一个单独的

标签，对吗？

更改为：

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

to:

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

---

如果您对一些最佳实践感兴趣，可以在此处查看逻辑的重写：http://jsfiddle.net/rgthree/ccyo77ep/

- rgthree

---

请注意，该循环不会处理“空”名称。但这样的验证逻辑应由原始发布者自行实现。 - Felix Kling

如果我这样做，它看起来会好一些，但现在我仍然会在另一个列表项中获得先前的结果，如果我现在输入Name2，它不是第二个而是第三个列表项，而Name1是第一个和第二个列表项。 - marcel jager

@marceljager 是的，你把 nameList 作为 submit 闭包之外的一个变量，所以它总是在添加相同的项目。我已经更新了我的答案，使得每次提交调用时，nameList 都会清空自己。这应该能解决你的问题 :) - rgthree

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会显示数组中所有条目并用逗号分隔。你需要遍历整个数组才能使它正常工作。但是你可以进行优化：

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>

在这个例子中，HTML使用UL（无序列表）容器来正确组织语法，并添加li（列表项）。

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

这行代码选择了名为name的

元素及其第一个子元素（ul），然后将LI添加到列表中。

正如@FelixKling所说：避免使用保留或模糊的名称。

- Mouser

---

没有解释已经很糟糕了，但这个实际上会产生错误的结果。 - Felix Kling

你应该解释一下你的代码解决了什么问题，以及如何解决。单独看代码很少能作为教学辅助工具（而回答问题则可以在某种程度上被视为“教学”）。 - David Thomas

@FelixKling 忽略了 +=，现在已经修正。 - Mouser

谢谢！这很有帮助，现在我可以用 CSS 让它变得漂亮了。 :) - marcel jager

Answer 3

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

- David Cameron