javascript - Array values in <li></li>

Question

How can i display my array values in <li></li>

My code :

HTML

<ul id="navp">
<li></li>
<li></li>
<li></li>
</ul>

JS

 var myList = [ 
 ['1','one'],
 ['1','two'],
 ['1','three'],
 ];
for (var tok in myList) { console.log(tok, myList[tok][1]); }

I want to display one, two, three in list (<li></li>).

• gen_Eric: What are you having trouble with? You seem to be able to loop through the array. Do you just not know how to edit DOM elements?
• Felix Kling: Have a look at w3.org/wiki/Creating_and_modifying_HTML and elated.com/articles/javascript-dom-intro.

Answer 1

One possible way:

var li = document.getElementById("navp").getElementsByTagName("li");
for (var i = 0, len = li.length; i < len; i++) {
 li[i].innerHTML = myList[i][1];
}

Another way is to use modern querySelectorAll:

var li = document.querySelectorAll("#navp > li");
for (var i = 0, len = li.length; i < len; i++) {
 li[i].innerHTML = myList[i][1];
}

Answer 2

With HTML:

<ul id="navp">
</ul>

Try these JS codes:

var myList = [ 
 ['1','one'],
 ['1','two'],
 ['1','three'],
 ];
var mainList = document.getElementById("navp");
for(var i=0;i<myList.length;i++){
 var item = myList[i];
 var elem = document.createElement("li");
 elem.value=item[0];
 elem.innerHTML=item[1];
 mainList.appendChild(elem);
 }

jsfiddle link

• gen_Eric: I don't think <li> elements have a .value attribute.

Answer 3

you can use like, dynamically depend on length of array push li tags

const emailList = [];
data.invalidEmailIds.forEach((email) => {
 emailList.push("<li>" + email + "</li>");
});

In html , just you can use {{emailList}}