2010-05-29 54 views
0

我有一个方法试图在列表中。该列表可以包含数据和其他列表。最终的目标是尝试的东西转换成这样使用Javascript递归生成嵌套列表时获取HIERARCHY_REQUEST_ERR

["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元素对象。

回答

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