Warum sollten Elemente, die nicht angehängt werden, in einer ForEach-Schleife aufgelistet werden?

Ich habe eine einfache forEach-Schleife, in der ich versuche, Listenelemente an eine ungeordnete Liste anzufügen. Wenn ich das Skript ausführe, sehe ich nur ein Listenelement hinzugefügt. Kann jemand erklären, warum das passiert?Warum sollten Elemente, die nicht angehängt werden, in einer ForEach-Schleife aufgelistet werden?

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>

das Protokoll in der Funktion zurückkehrt, dass es zwei Objekte in dem Array.

Quelle

2016-06-15 Anonymous

'' ist nicht HTML. – Quentin

benutzerdefinierte Elemente sind jetzt erlaubt (leider) aber das ist nicht wie man ein in js erstellen. – rlemon

@Quentin ist es, wenn Sie es als ein DOM-Element erstellen –

Sie erstellen immer nur einen Listeneintrag.

Sie hängen es dann an mehreren Stellen an.

Da ein Element nicht an mehreren Stellen gleichzeitig vorhanden sein kann, verschieben Sie es bei jedem Anhängen (nach dem ersten) .

Verwenden Sie innerhalb Ihrer Schleife let listItems = document.createElement("LI");.

Quelle

2016-06-15 12:16:40 Quentin

Ja, es gibt zwei Objekte im Array, aber Sie fügen das gleiche Element zweimal zur unorganisierten Liste hinzu. Beim zweiten Mal sieht der Browser, dass das Element bereits vorhanden ist und fügt es nicht erneut hinzu.

Ein besserer Ansatz wäre, einfach ein neues li Element in jeder Iteration der Schleife zu erstellen:

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

Beachten Sie, dass ich den listItems Parameter als Wert in gebenen entfernt haben jetzt ungenutzt ist.

Sie Ihr Programm einen Schritt weiter gehen kann, jetzt durch etwas in dieser Richtung tun:

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

, die eine Liste von Buchtiteln erstellen, werden Sie Titel in Ihrem Book in einer title Eigenschaft gespeichert haben unter der Annahme, Konstrukteur.

Quelle

2016-06-15 12:24:02 Tobsta

Warum sollten Elemente, die nicht angehängt werden, in einer ForEach-Schleife aufgelistet werden?

Antwort

Verwandte Themen