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>).
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];
}
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);
}
<li> elements have a .value attribute.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}}
