Javascript Unordered List from Array

Question

I just came across this on the w3schools Javascript tutorial:

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

I understand what arrays are and how to loop through them, but I need help with the part where they are creating the unordered list from the array. Can anyone help with this please?

Thanks in advance, Wasi

Answer 1

That code doesn't create an unordered list from an array. It creates a string containing HTML markup for one, by starting out with a string:

text = "<ul>";

then adding to it once for each entry in the string:

text += "<li>" + fruits[i] + "</li>";
//   ^^-- adds to the end of the string (well, technically it creates a new string
//        and updates `text` to contain the new string)

then adding the ending </ul> after the loop:

text += "</ul>";

At the end, text is a string with this HTML in it:

<ul><li>Banana</li><li>Orange</li><li>Apple</li><li>Mango</li></ul>

To actually create an unordered list, something has to parse that HTML. They probably do something like this later:

someElement.innerHTML = text;

Live Example:

 var fruits, text, fLen, i; fruits = ["Banana", "Orange", "Apple", "Mango"]; fLen = fruits.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; document.getElementById("some-element").innerHTML = text;

 <div id="some-element"></div>

Assigning to the innerHTML property on an element makes the browser parse the HTML and creates the appropriate DOM nodes/elements, then replace the element's contents with those nodes/elements.

There are other ways, though, such as insertAdjacentHTML which lets you insert nodes/elements before an element, after it, inside it at the beginning (without replacing its existing content), or inside it at the end (without replacing its existing content). For example, this inserts at the end of body :

 var fruits, text, fLen, i; fruits = ["Banana", "Orange", "Apple", "Mango"]; fLen = fruits.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; document.body.insertAdjacentHTML( "beforeend", text );

 <div>Content already in the `body` element before `insertAdjacentHTML`.</div>

Or you can use DOMParser if you want to parse it without adding it to any document:

 var fruits, text, fLen, i; fruits = ["Banana", "Orange", "Apple", "Mango"]; fLen = fruits.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; var parser = new DOMParser(); var doc = parser.parseFromString(text, "text/html"); var liElements = doc.querySelectorAll("li"); console.log("`li` elements found: " + liElements.length);