Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list
- by Mark
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.
