logo标签列表

如何使用JavaScript创建新列表并向其中添加列表项

javascript
3

我正在试图创建一个新的列表并将其添加到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();
4个回答
3

两个问题：

  1. 您正在反复附加相同的li。 您需要为每个项目创建一个新的。
  2. 您无法将字符串附加到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>

1
你需要创建一个文本节点并将其附加到<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>

谢谢subwaymatch，我现在明白我错在哪里了，非常感谢你的帮助。 - user3649499
1

只需循环遍历字符串数组并添加li，就像这样：

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的示例在这里

如果这是一个站点导航，您可能想要添加链接。这也很容易 - 只需在循环中附加<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示例

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

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

function buildList() {
  document.getElementById('nav').innerHTML = '<ul><li>' + stringArray.join('</li><li>') + '</li></ul>'
}

buildList()
<nav id="nav"></nav>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接