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

我想创建一个新列表并将其添加到DOM，然后将列表项添加到新列表以及文本节点到每个列表项。这是我迄今为止，尝试了几种方法来做到这一点，但仍然没有完成目标。任何帮助表示赞赏。前4行代码是HTML代码片段，下面的代码是JavaScript代码。再次感谢您的帮助。如何使用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();

来源

2017-02-28 user3649499

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

来源

2017-02-28 06:20:49 subwaymatch

谢谢苏bwaymatch，我看到我现在出了什么问题，你的帮助表示感谢。 – user3649499

两个问题：

你一遍又一遍追加相同li。您需要为每个项目创建一个新的。
你不能一个字符串附加到DOM元素，但是你可以设置它的textContent：与.forEach()

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>

稍微干净的版本：

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>

来源

2017-02-28 06:19:22 JLRishe

只是循环的字符串数组过，并添加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

如果它应该是一个网址导航，你可能想要添加li NKS。这很简单，太 - 只是追加<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

来源

2017-02-28 06:22:40 helb

在这种情况下，我会主张使用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>

来源

2017-02-28 06:23:50 gyre

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

回答

相关问题