Question

我希望能够将一个由用户输入的名称组成的数组转换为无序列表，但列表会显示第一个列表项上的所有名称。如何将名称分隔到不同的列表项？

这就是我目前所拥有的：

function createList(){
    var list = document.getElementById("list");
    var li = document.createElement("li");
    var input = document.getElementById("q8").value;
    var strComma = input.split(",");
    console.log(strComma);
    var i = 0;
    for (i; i < strComma.length; i++){
        var el = document.createTextNode(strComma[i]);
        li.appendChild(el);
        list.appendChild(li);
    }
}

Answer 1

那应该做一个技巧

function createList(){
    var list = document.getElementById("list");
    //var li = document.createElement("li");
    var input = document.getElementById("q8").value;
    var strComma = input.split(",");
    console.log(strComma);
    var i = 0;
    for (i; i < strComma.length; i++){
        var el = document.createTextNode(strComma[i]);
        var li = document.createElement("li");
        li.appendChild(el);
        list.appendChild(li);
    }
}

这样您就可以创建新的li元素并附加到相同的现有ul元素。在你的方式中，你在外部循环中声明了li，你每次只引用相同的li元素。

Answer 2

你可以这样使用

<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the array into a String.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   fruits.toString();
   document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

JavaScript - 将数组转换为列表

2 个答案: