Wie fügt man Text in ein li mit einem Array ein?

Question

ich eine Seite mit vielen Liste erstellen, und ich habe eine Struktur wie folgt aus:

<ul class="list-container"> 
    <li>TEXT 
    <li>TEXT 
    <li>TEXT 
</ul> 

Kann ich erstellen ein Array wie var a = [1,2,3,4] und li wird:

<ul> 
    <li>1 
    <li>2 
    <li>3 
    <li>4 
</ul> 

Ich habe versucht, mit:

var a = [ 
 
    "Testo 1", 
 
    "Testo 2", 
 
    "Testo 3", 
 
    "Testo 4" 
 
]; 
 

 
for (var i = 0; i < document.querySelector("li").length; i++) { 
 
    document.querySelector("li")[i].innerHTML = a[i]; 
 
}

<ul> 
 
    <li> 
 
    <li> 
 
    <li> 
 
</ul>

Es funktioniert nicht, kann mir jemand helfen?

Answer 1

Die Methode querySelector() gibt nur das erste Element zurück, das den angegebenen Selektoren entspricht. Um alle Übereinstimmungen zurückzugeben, verwenden Sie stattdessen die Methode querySelectorAll().

var a = [ 
 
    "Testo 1", 
 
    "Testo 2", 
 
    "Testo 3", 
 
    "Testo 4" 
 
]; 
 
for (var i = 0; i < document.querySelectorAll("li").length; i++) { 
 
    document.querySelectorAll("li")[i].innerHTML = a[i]; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <li> 
 
    <li> 
 
</ul>

Answer 2

Im Fall müssen Sie nicht <li> Elemente zu hart Code Ihr wollen Sie sie dynamisch erstellen können.

var a = [ 
 
    "Testo 1", 
 
    "Testo 2", 
 
    "Testo 3", 
 
    "Testo 4" 
 
]; 
 

 
a.map(function (el) { 
 
    var li = document.createElement("li"); 
 
    li.appendChild(document.createTextNode(el)); 
 
    document.getElementById("list").appendChild(li) 
 
});

<ul id="list"> 
 
</ul>

Side Hinweis: Sie können auch map() verwenden

<li> Elemente sollten einen schließenden Tag

Answer 3

soemthing wie dies in reinen JavaScript haben:

var arr = [1, 2, 3, 4]; 
 
var list = document.getElementById('list'); 
 
for (var i = 0; i < arr.length; ++i) { 
 
    var item = document.createElement('li'); 
 
    var text = document.createTextNode(arr[i]); 
 
    item.appendChild(text); 
 
    list.appendChild(item); 
 
}

<ul id="list"></ul>