You're modifying the DOM tree as you're traversing it. Each time you call
traverse
, you add a new
<li>
element to the list, which gives you another element to traverse, which means you call
traverse
again, which adds another new
<li>
element, ...
Don't modify the document until you've finished traversing it. The simplest option is probably to create a detatched
<ul>
element to act as the parent, and append it to a
<div>
when you've finished:
var root = document.documentElement;
var troot = document.createElement("ul");
traverse(root, troot);
document.getElementById("listContainer").appendChild(troot);