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

使用Javascript递归生成嵌套列表时获取HIERARCHY_REQUEST_ERR

1 个答案: