Objective

Fill up those <ol> and <ul> elements with <li> elements that have a data-list attribute on them.

Difficulty

Easy

Description

Consider the following <ol> list:

<ol>
   <li>Python</li>
   <li>JavaScript</li>
   <li>Java</li>
   <li>Ruby</li>
</ol>

We'd call this a static list, i.e. it's present in the HTML source code as it is.

Now consider the following code:

<ol data-list="Python|JavaScript|Java|Ruby"></ol>

The collection of elements to be included in the <ol> element is given in its data-list attribute. Each element is separated from the other using the pipe (|) character.

If we were to use some JavaScript to fill up this <ol> element with <li> elements, each containing one item from the data-list collection, this list would be called a dynamic list, i.e. it gets created dynamically and is not already there in the HTML source code.

In this exercise, you have to dynamically fill up all <ol> and <ul> elements containing a data-list attribute, in a given HTML document, with <li> elements.

Your solution MUST employ the DocumentFragment interface.

Shown below are a handful of examples.

If the HTML document has the following markup (obviously excluding <html>, <head> and <body> tags here),

<ol data-list="Python|JavaScript|Java|Ruby"></ol>

your JavaScript code should turn it into the following:

<ol data-list="Python|JavaScript|Java|Ruby">
   <li>Python</li>
   <li>JavaScript</li>
   <li>Java</li>
   <li>Ruby</li>
</ol>

There is no need to remove the data-list attribute from the element node; just add the desired <li> elements, that's it.

Similarly, if the HTML source code is the following,

<ol>
   <li>Pizza</li>
   <li>Donut</li>
   <li>Burger</li>
</ol>

<ol data-list="1|2|3"></ol>

<ul data-list="Machine Learning|AI|Deep Learning"></ul>

<ul></ul>

your code should turn it into the following:

<ol>
   <li>Pizza</li>
   <li>Donut</li>
   <li>Burger</li>
</ol>

<ol data-list="1|2|3">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ol>

<ul data-list="Machine Learning|AI|Deep Learning">
   <li>Machine Learning</li>
   <li>AI</li>
   <li>Deep Learning</li>
</ul>

<ul></ul>

Note that since the first <ol> and the last <ul> elements here didn't have the data-list attribute, we didn't concern ourselves with them.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-45-Dynamic-Lists and put the .html solution files for this exercise within it.

Solution

Step one is to select all <ol> and <ul> elements on the document and then filter out those that have the data-list attribute present on them. These filtered elements are what concern us. We ought to dynamically fill them up with <li> elements.

Step two, once we have a collection of all the concerning <ol> and <ul> elements, is to process each one of them. And for this, we'll create a function.

The function, let's call it fillUpList(), would take in a list element node (<ol> or <ul>), read its data-list attribute, and then fill up the node with <li> elements (hence the name, fillUpList).

Below, we define the function:

function fillUpList(listElement) {
   // Read and process the data-list attribute.
   var list = listElement.getAttribute('data-list').split('|');

   var fragment = document.createDocumentFragment();
   var listItemElement;

   // Create an <li> element for each item of list.
   for (var i = 0, len = list.length; i < len; i++) {
      listItemElement = document.createElement('li');
      listItemElement.textContent = list[i];
      fragment.appendChild(listItemElement);
   }

   // Dump the set of <li> elements inside the <ol>/<ul> element.
   listElement.appendChild(fragment);
}

With the function in hand, let's now come back to selecting all <ol> and <ul> elements.

This is accomplished below:

function fillUpList(listElement) {
   /* ... */
}

var listElements = document.querySelectorAll('ol, ul');

for (var i = 0, len = listElements.length; i < len; i++) {
   // If the <ol>/<ul> element has a data-list attribute,
   // fill it up with <li> elements.
   if (listElements[i].hasAttribute('data-list')) {
      fillUpList(listElements[i]);
   }
}

Perfect.

Let's now test this code on the following HTML markup:

<ol>
   <li>Pizza</li>
   <li>Donut</li>
   <li>Burger</li>
</ol>

<ol data-list="1|2|3"></ol>

<ul data-list="Machine Learning|AI|Deep Learning"></ul>

<ul></ul>

Live Example

As expected, it works just as desired.