Why would list items not be appending while in a forEach loop?

Question

I have a simple forEach loop in which I'm trying to append list items to an unordered list. However, when I run the script, I'm only seeing one list item being added. Can anyone explain why this is happening?

JS

let bookElement = document.getElementsByClassName("book");
let navElement = document.getElementsByTagName("nav")[0];
let unorderedList = document.createElement("UL");
let listItems = document.createElement("LI");
let book1 = new Book();
let book2 = new Book();
let booksArray = [book1, book2];

createNavigation(booksArray, navElement, unorderedList, listItems);

function createNavigation(booksArray, navElement, unorderedList, listItems){
    console.log(booksArray)
    booksArray.forEach(function(book){
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

HTML

<body>
    <nav></nav>
    <div class="book"></div>
</body>

The log in the function is returning that there are two objects in the array.

custom elements are allowed now (sadly) however that isn't how to create one in js. — rlemon, Jun 15 '16 at 12:19
@Robert — No, it isn't. It will be some error correction invalidly lurking around on the HTML namespace in the DOM. It won't be HTML. — Quentin, Jun 15 '16 at 12:19
@Quentin as rlemon said, you can create custom elements using javascript — , Jun 15 '16 at 12:20
actually I said custom elements are allowed, but you have created one wrong. http://stackoverflow.com/a/9845124/829835 — rlemon, Jun 15 '16 at 12:21
@rlemon Here's what I have in my working code `document.createElement("BOOK");` I just didn't post it — , Jun 15 '16 at 12:22

score 3 · Accepted Answer · answered Jun 15 '16 at 12:16

You only ever create one list item.

You then append it in multiple places.

Since an element can't exist in multiple places at the same time, each time you append it (after the first) you move it.

Use let listItems = document.createElement("LI"); inside your loop.

score 0 · Answer 2 · answered Jun 15 '16 at 12:24

Yes, there are two objects in the array, but you're adding the same element to the unorganised list twice. So, the second time it's added, the browser sees that the element is already there and doesn't add it again.

A better approach would be to simply create a new li element in each iteration of the loop:

function createNavigation(booksArray, navElement, unorderedList){
    console.log(booksArray)
    booksArray.forEach(function(book){
        let listItems = document.createElement("LI");
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

Notice that I've removed the listItems parameter as the value passed into it is now unused.

You can take your program a step further, now, by doing something along these lines:

function createNavigation(booksArray, navElement, unorderedList){
    console.log(booksArray)
    booksArray.forEach(function(book){
        let listItems = document.createElement("LI");
        listItems.innerHTML = book.title;
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

That will create a list of book titles, assuming you have titles stored in a title property in your Book constructor.

Why would list items not be appending while in a forEach loop?

2 Answers2

Linked

Related