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

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

javascript

如何使用javascript创建新列表并将列表项添加到新列表,javascript,Javascript,我试图创建一个新列表并将其添加到DOM中，然后将列表项添加到新列表中，并将文本节点添加到每个列表项中。这就是我到目前为止所做的，在尝试了几种方法之后，仍然没有达到目标。感谢您的帮助。前4行代码是HTML代码段，下面的代码是JavaScript代码。再次感谢您在这方面的帮助 <body> <div id="nav"></div> <script src="js/script.js"></script> </body> va

我试图创建一个新列表并将其添加到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();


var newList=document.createElement（“ul”）；
var newListItem=document.createElement（“li”）；
var stringArray=[“主页”、“关于”、“我们的服务”、“联系我们”]；
var newUL=document.getElementById（“nav”）.appendChild（newList）；
函数buildList（）{
对于（var i=0；i

两个问题：
您正在一次又一次地追加相同的li
。您需要为每个项目创建一个新项目
不能将字符串附加到DOM元素，但可以设置其textContent
：

var stringArray=[“主页”、“关于”、“我们的服务”、“联系我们”]；
函数buildList（）{
var newList=document.createElement（“ul”）；
var新列表项；
document.getElementById（“nav”）.appendChild（新列表）；
对于（var i=0；i
您需要创建一个文本节点并将其附加到
元素

var newList=document.createElement（“ul”）；
var stringArray=[“主页”、“关于”、“我们的服务”、“联系我们”]；
//创建一个元素
var newUL=document.getElementById（“nav”）.appendChild（newList）；
函数buildList（）{
对于（var i=0；i
只需在字符串数组上循环并添加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);



如果它应该是一个站点导航，您可能需要添加链接。这也很容易–只需附加
在本例中，我认为使用innerHTML
和Array#join
比其他替代方法更简单、更可读：

var stringArray=[“主页”、“关于”、“我们的服务”、“联系我们”]；
函数buildList（）{
document.getElementById（'nav'）.innerHTML=''+stringArray.join（'
'））+''
}
buildList（）
谢谢地铁比赛，我知道我现在哪里出了问题，非常感谢你的帮助。
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);