JavaScript: How to generate nested ordered list

Question

How to generate nested ordered lists from the following content? I have searched the forum and worked for a few hours now to generate ordered lists based on the different classes from the source content. The content may have up to 6 nesting level. What I need is to generate ordered lists based on the different classes. As shown in the sample content to get something like below outlined example content.

.firstclass => 1. 
    .secondclass => 1.
        .thirdclass => 1.
            .fourthclass => 1.

The code:

var cheerio = require('cheerio');
var $ = cheerio.load('<h1 class="header">First Header</h1><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="secondclass">Second Lorem ipsum dolor sit amet.</p>    <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p>', {
    normalizeWhitespace: true,
    xmlMode: true,
    decodeEntities: false,
});

var myContent = $('p').each(function() {
    var para = $(this).text();
    return para;
});

var olClass = ['.firstclass', '.secondclass', '.thirdclass', '.fourthclass'];

function arrToOl(arr) {
    var ol = $('<ol />'),
        li = $('<li />');
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            li.append(arrToOl(arr[i]));
        } else {
            li = $('<li />');
            li.append($(arr[i]));
            ol.append(li);
        }
    }
    return $.html(ol);
}
console.dir(arrToOl(olClass));

The above code produces the following:

'<ol><li><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p></li><li><p class="secondclass">Second Lorem ipsum dolor sit amet.</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p></li><li><p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p></li><li><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p></li></ol>'

The desired result should be:

   <ol>
    <li>
        <p class="firstclass">First Lorem ipsum dolor sit.</p>
    </li>
    <li>
        <p class="firstclass">First Qui consequatur labore at.</p>
    </li>
    <li>
        <p class="firstclass">First Lorem ipsum dolor sit amet.</p>
        <ol>
            <li>
                <p class="secondclass">Second Lorem ipsum dolor sit amet.</p>
            </li>
            <li>
                <p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p>
                <ol>
                    <li>
                        <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p>
                    </li>
                    <li>
                        <p class="thirdclass">Third Molestias optio quasi ipsam unde!</p>
                        <ol>
                            <li>
                                <p class="fourthclass">Fourth Lorem ipsum dolor sit.</p>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Your help is really appreciated.

Answer 1

Here's what I got.

 let array = ["a", "b", "c", "d"]; var nested; function create_nested() { var old_ol; for (let i = 0; i < array.length; i++) { let new_ol = document.createElement("ol"); let new_li = document.createElement("li"); new_li.innerHTML = array[i]; new_ol.appendChild(new_li); if (i !== 0) { let nest_li = document.createElement("li"); let new_p = document.createElement("p"); new_p.innerHTML = "new stuff"; nest_li.appendChild(new_p); nest_li.appendChild(old_ol); new_ol.appendChild(nest_li); } old_ol = new_ol; nested = new_ol; } } create_nested(); document.getElementById('main').appendChild( nested); 

 <div id='main'> </div> 

This is just an example and not exactly the data that you have (you can figure that out).

What's happening is that I'm creating new elements using document.createElement , after which I am inserting them into their corresponding ol/li using appendChild .

The most important part is the if (i !== 0) (Change this to suit whether you want to start from the beginning or end of your array). This is the part where I am creating the nests.

I am creating a new li , which has the <p> and the old_ol which is the nesting li. So what this function is doing, is creating the innermost ol, and expanding it upward.

There might be a clear/better way of doing this, but this is as far as I know in vanilla JS. I hope everything is clear enough.