从 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>

例如，如果我 post 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 将显示数组的所有条目，并以逗号分隔。您需要遍历数组以使其工作。但是你可以优化这个：

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>

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

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

此行选择名称为 name 的 div 及其第一个子项（ul）。然后它将 LI 附加到列表中。

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

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

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

Make a html unordered list from javascript array

javascript

html

dom