I have a method that is trying to take in a list. This list can contain data and other lists. The end goal is to try to convert something like this

["a", "b", ["c", "d"]]  

into

<ol>
    <li>
        <b>a</a>
    </li>
    <li>
        <b>b</a>
    </li>
    <ol>
        <li>
            <b>c</a>
        </li>
        <li>
            <b>d</a>
        </li>
    </ol>
</ol>

The code is:

function $(tagName) {
    return document.createElement(tagName);
}

//returns an html element representing data
//data should be an array or some sort of value
function tagMaker(data) {
    tag = null;


    if(data instanceof Array) {
        //data is an array, represent using <ol>
        tag = $("ol");
        for(i=0; i<data.length; i++) {
            //construct one <li> for each item in the array 
            listItem = $("li");
            //get the html element representing this particular item in the array
            child = tagMaker(data[i]);
            //<li>*html for child*</li>
            listItem.appendChild(child);
            //add this item to the list
            tag.appendChild(listItem);
        }
    } else {
        //data is not an array, represent using <b>data</b>
        tag = $("b");
        tag.innerHTML = data.toString();
    }

    return tag;
}

Calling tagMaker throws HIERARCHY_REQUEST_ERR: DOM Exception 3, rather than generating a helpful HTML element object which I was planning to append to document.body.