title: How to use jQuery to render a JSON tree as nested HTML using divs?
body: <p>I am looking for a way to render a JSON tree using nested <code>&lt;div&gt;</code> as mentioned in the title. Here is a sample of the data (there is a max of 8 levels in the tree):</p>
  
  <pre><code>{
      "children": {
          "Bacteria": {
              "children":{
                  "Verrucomicrobia":{
                      "children":{
                          "Methylacidiphilae":{
                              "children":{
                                  "Methylacidiphilales":{
                                      "children":{},
                                      "count":2,
                                      "level":"order",
                                      "name":"Methylacidiphilales",
                                      "score":1.46
                                  }
                              },
                              "count":2,
                              "level":"class",
                              "name":"Methylacidiphilae",
                              "score":1.46
                          }
                      },
                      "count":2,
                      "level":"phylum",
                      "name":"Verrucomicrobia",
                      "score":1.46
                  }
              },
              "count":2,
              "level":"kingdom",
              "name":"Bacteria",
              "score":1.46
          }
      },
      "count":0,
      "level":"root",
      "name":"Root",
      "score":0.0
  }
  </code></pre>
  
  <p>I can get/parse the JSON tree and save it to a variable. Now I need to traverse the tree recursively and either:</p>
  
  <ol>
  <li>Make each node into something that can be rendered as HTML.</li>
  <li>Create a new <code>div</code> node and add to a new tree.</li>
  </ol>
  
  <p>But how?</p>