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?
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"