How do you add an `li` tag only data exists in an array in html/css/javascript?-CodePudding

I am brand new to HTML/CSS/Javascript fyi. So I have a list of items in html using an ul tag and multiple li tags. I don't understand how I am only able to add an li if there is data that exists.

For example: I am using firebase as my backend. Lets say we have a list saved to firebase called myList:

myList = ["dog", "cat", "pig"]

So right now if i was going to use this list I would need 3 li tags.

<ul>
  <li>dog</li>
  <li>cat</li>
  <li>pig</li>
</ul>

But lets say another user adds a 4th element called "cow". So now myList equals:

myList = ["dog", "cat", "pig", "cow"]

I only have 3 li tags so how do I now add a 4th one to my code so it will present cow in the list? I understand in other languages you could just use a for loop for however many data points there are in your list, but html doesn't have for loops so how do I do this?

CodePudding user response：

use this example

var node = document.createElement("LI");      // Create a <li> node

var textnode = document.createTextNode("Water");  // Create a text node

node.appendChild(textnode);                      // Append the text to <li>

document.getElementById("myList").appendChild(node);  // Append <li> to <ul> with id="myList"

CodePudding user response：

you can use javascript to make list in html like this :

window.addEventListener("load", () => {
 const ul = document.querySelector("ul")
 const lists = ["cow", "lion", "tiger"];


 lists.forEach((list) => {
    const node = document.createElement("li");
    const textNode = document.createTextNode(list);
    node.appendChild(textNode);
    ul.appendChild(node);
 });
});