Objective
Fill up those <ol> and <ul> elements with <li> elements that have a data-list attribute on them.
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.
New file
Inside the directory you created for this course on JavaScript, create a new folder called Exercise-48-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>As expected, it works just as desired.
