使用Java递归生成嵌套列表时获取HIERARCHY_REQUEST_ERR [英] Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list

问题描述

我有一个尝试获取列表的方法.该列表可以包含数据和其他列表.最终目标是尝试转换这样的内容

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"]]  

进入

<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，而不是生成我打算附加到document.body的有用的HTML元素对象.

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.

推荐答案

我知道了.在函数内，如果在创建新变量时不使用var关键字，则Javascript将为变量赋予全局作用域.当我尝试递归生成新标签时，它覆盖了父标签.出现错误是因为我试图向自身添加元素.一个有效的版本出现在下面.

I figured it out. Within a function if you do not use the var keyword when creating new variables, Javascript will give the variables a global scope. When I was trying to recursively generate new tags, it overwrote the parent tag. The error arises because I was trying to add an element to itself. A working version appears below.

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

这篇关于使用Java递归生成嵌套列表时获取HIERARCHY_REQUEST_ERR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！