how to create new list and add list items to new list using javascript

Question

I am trying to create a new list and add it to the DOM, and then add list items to new list along with text node to each list item. This is what I have so far, after trying several ways to do this, but still not accomplishing goal. any help is appreciated.The first 4 lines of code is HTML snippet, the code below that is the JavaScript code. Again thank you for any help with this.

<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();

JLRishe · Accepted Answer · 2017-02-28 06:29:33Z

Two problems:

You're appending the same li over and over. You need to create a new one for each item.
You can't append a string to a DOM element, but you can set its 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>

Slightly cleaner version with .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>

subwaymatch · Accepted Answer · 2017-02-28 06:20:49Z

1

You need to create a text node and append it to the <li> element.

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>

answered Feb 28, 2017 at 6:20

subwaymatch

1,04010 silver badges12 bronze badges

1 Comment

user3649499 Over a year ago

Thank you subwaymatch, I see where I have gone wrong now, you help is appreciated.

helb · Accepted Answer · 2017-02-28 06:36:48Z

Just loop over the string array and add lis, like this:

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

If it's supposed to be a site navigation, you may want to add links. That's easy, too – just append <a> in the loop like this:

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

gyre · Accepted Answer · 2017-02-28 06:23:50Z

0

In this case, I would contend that using innerHTML and Array#join is simpler and more readable than other alternatives:

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>

answered Feb 28, 2017 at 6:23

gyre

16.8k4 gold badges40 silver badges47 bronze badges

Collectives™ on Stack Overflow

how to create new list and add list items to new list using javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related