Question

我正在尝试创建一个新列表并将其添加到DOM，然后将列表项添加到新列表以及每个列表项的文本节点。这是我到目前为止，尝试了几种方法，但仍然没有完成目标。感谢任何帮助。前4行代码是HTML代码段，下面的代码是JavaScript代码。再次感谢您对此的任何帮助。

<body>
<div id="nav"></div>
<script src="js/script.js"></script>
</body>

var newList = document.createElement("ul");
var newListItem = document.createElement("li");

var stringArray = ["Home","About","Our Services","Contact Us"];     

var newUL = document.getElementById("nav").appendChild(newList);

function buildList(){
for( var i = 0; i < stringArray.length; i++){
    newUL.appendChild(newListItem);
}
var listItems = document.getElementsByTagName("li");

for( var i = 0; i < listItems.length; i++){
    listItems[i].appendChild(stringArray[i]);
}
}

buildList();

Answer 1

两个问题：

你一遍又一遍追加li。您需要为每个项目创建一个新项目。
您不能将字符串附加到DOM元素，但您可以设置其textContent：

var stringArray = ["Home","About","Our Services","Contact Us"];     

function buildList(){
    var newList = document.createElement("ul");
    var newListItem;
    document.getElementById("nav").appendChild(newList);

    for( var i = 0; i < stringArray.length; i++){
        newListItem = document.createElement('li');
        newListItem.textContent = stringArray[i];
        newList.appendChild(newListItem);
    }
}

buildList();

<div id="nav"></div>

使用.forEach()稍微清洁的版本：

var stringArray = ["Home","About","Our Services","Contact Us"];     

function buildList(){
    var newList = document.createElement("ul");
    document.getElementById("nav").appendChild(newList);

    stringArray.forEach(function (title) {
        var newListItem = document.createElement('li');
        newListItem.textContent = title;
        newList.appendChild(newListItem);
    });
}

buildList();

<div id="nav"></div>

Answer 2

您需要创建一个文本节点并将其附加到<li>元素。

var newList = document.createElement("ul");
var stringArray = ["Home","About","Our Services","Contact Us"];

// Create a <ul> element
var newUL = document.getElementById("nav").appendChild(newList);

function buildList(){
    for(var i = 0; i < stringArray.length; i++){
        // Create a text node
        var newTextNode = document.createTextNode(stringArray[i]); 

        // Create a list element
        var newListItem = document.createElement("li");
        
        // Append text node and list item
        newListItem.appendChild(newTextNode); 
        newUL.appendChild(newListItem); 
    }
}

buildList();

<body>
<div id="nav"></div>
</body>

Answer 3

只需遍历字符串数组并添加li s，如下所示：

var nav = document.querySelector("nav");
var list = document.createElement("ul");
var items = ["Home","About","Our Services","Contact Us"];   

items.forEach(function(item) {
  var li = document.createElement("li");
  li.innerText = item;
  list.appendChild(li);
})


nav.appendChild(list);

Codepen example here

如果它应该是网站导航，您可能想要添加链接。这也很简单 - 只需将<a>添加到循环中，就像这样：

var nav = document.querySelector("nav");
var list = document.createElement("ul");
var items = [{
  text: "Home",
  url: "/home"
}, {
  text: "About",
  url: "/about"
}, {
  text: "Our services",
  url: "/services"
}, {
  text: "Contact Us",
  url: "/contact"
}]

items.forEach(function(item) {
  var li = document.createElement("li");
  var link = document.createElement("a");
  link.innerText = item.text;
  link.href = item.url;
  li.appendChild(link);
  list.appendChild(li);
})

nav.appendChild(list);

Codepen example here

Answer 4

在这种情况下，我认为使用innerHTML和Array#join比其他替代方案更简单，更易读：

＆＃13;

var stringArray = ["Home", "About", "Our Services", "Contact Us"];

function buildList() {
  document.getElementById('nav').innerHTML = '<ul><li>' + stringArray.join('</li><li>') + '</li></ul>'
}

buildList()

＆＃13;

<nav id="nav"></nav>

＆＃13;

如何使用javascript创建新列表并将列表项添加到新列表

4 个答案: