Получение HIERARCHY_REQUEST_ERR при использовании Javascript для рекурсивной генерации вложенного списка

Question

У меня есть метод, который пытается взять в списке. Этот список может содержать данные и другие списки. Конечная цель - попытаться преобразовать что-то вроде этого

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

в

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

Код является:

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;
}

Вызов tagMaker выдает HIERARCHY_REQUEST_ERR: DOM Exception 3, а не генерирует полезный объект HTML-элемента, который я планировал добавить в document.body.

Answer 1

Я понял. Внутри функции, если вы не используете ключевое слово var при создании новых переменных, Javascript предоставит переменным глобальную область видимости. Когда я пытался рекурсивно генерировать новые теги, он перезаписывал родительский тег. Ошибка возникает потому, что я пытался добавить элемент к себе. Рабочая версия появится ниже.

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) {
    var tag = null;


    if(data instanceof Array) {
        //data is an array, represent using <ol>
        tag = $("ol");
        for(var i=0; i<data.length; i++) {
            //construct one <li> for each item in the array 
            var listItem = $("li");
            //get the html element representing this particular item in the array
            var 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;
}