Obtenir HIERARCHY_REQUEST_ERR lors de l'utilisation de Javascript pour générer de façon récursive une liste imbriquée

Question

J'ai une méthode qui essaie de prendre une liste. Cette liste peut contenir des données et d'autres listes. L'objectif final est d'essayer de convertir quelque chose comme ça

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

dans

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

Le code est:

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

Appel tagMaker lance HIERARCHY_REQUEST_ERR: DOM Exception 3, au lieu de générer un objet élément HTML utile que j'avais l'intention d'ajouter à document.body.

Answer 1

Je l'ai compris. Au sein d'une fonction si vous n'utilisez pas le mot-clé var lors de la création de nouvelles variables, Javascript donnera aux variables une portée globale. Lorsque j'essayais de générer récursivement de nouvelles balises, il écrasait la balise parent. L'erreur se produit parce que j'essayais d'ajouter un élément à lui-même. Une version de travail apparaît ci-dessous.

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