如何使用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創建新列表並將列表項添加到新列表中

回答

相關問題