Dynamisch fügen Li zu UL Javascript

Question

Ich habe eine Reihe von Namen und ich möchte sie auf meiner Seite zeigen. Ich habe eine leere ul in meinem html

<ul id="friendsList"> 
</ul> 

Und nun möchte ich die Namen dieser ol hinzufügen, aber ich nicht funktioniert

for (var i = 0; i < names.length; i++) { 
    var name = names[i]; 
    var li = document.createElement('li', name); 
    li.parentElement('friendsList'); 
} 

Fehler: Ausnahme von Benutzer-Callback ausgelöst wurde. TypeError: li.parentElement ist keine Funktion

Answer 1

Sie müssen Ihre li an ul anhängen. Diese document.createElement('li', name); wird nicht funktionieren.

Syntax

document.createElement(tagName[, options]); 

tagName: A string that specifies the type of element to be created.

options (Optional): An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define() .

document.createElement() documentation

var names = ['John', 'Jane'] 
 

 
for (var i = 0; i < names.length; i++) { 
 
    var name = names[i]; 
 
    var ul = document.getElementById("friendsList"); 
 
    var li = document.createElement('li'); 
 
    li.appendChild(document.createTextNode(name)); 
 
    ul.appendChild(li); 
 
}

<ul id="friendsList"> 
 
</ul>

Answer 2

unten Beispiel Versuchen - verwenden appendChild auf Ihrem UL, die Sie getElement erhalten mit ById():

var names = ["John","Mike","George"] 
 
for (var i = 0; i < names.length; i++) { 
 
    var name = names[i]; 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = name; 
 
    document.getElementById('friendsList').appendChild(li); 
 
}

<ul id="friendsList"></ul>

Answer 3

Node.parentElement ist ein Nur-Lese-Eigenschaft (dh, wenn Sie den übergeordneten Knoten eines bestimmten Knotens inspizieren wollen)

Wenn Sie Knoten einfügen möchten gibt es verschiedene Möglichkeiten:

Eine der Lösungen ist die Methode appendChild auf dem Elternknoten zu verwenden.

Wenn Sie ein Reflow vermeiden wollen (der Browser neu zeichnet den Rahmen) ein jedes Einfügen Sie können zuerst insert your elements in a document fragment

const fragment = document.createDocumentFragment(); 
for(let name of names){ 
    const li = document.createElement('li'); 
    li.textContent = name; 
    fragment.appendChild(li); 
} 
//now you add all the nodes in once 
const container = document.getElementById('friendsList'); 
container.appendChild(fragment); 

Answer 4

var friendsList = document.getElementById('friendsList'); 
 
var names = ["John","Mike","George"]; 
 
names.forEach(function (name) { 
 
    var li = document.createElement('li'); 
 
    li.innerHTML = name; 
 
    friendsList.appendChild(li); 
 
});

Answer 5

// using Es6 
 
let names = ['john','jane','smith']; 
 
names.forEach((name)=>{ 
 
let li = document.createElement('li'); 
 
li.innerText = name; 
 
document.getElementById('friendsList').appendChild(li); 
 
})

<ul id="friendsList"></ul>