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.