title: Iterating through nested objects/arrays
body: <p>I'm trying to iterate through an object that can have several levels of arrays.</p>
  
  <p>Eg.</p>
  
  <p>I start with:</p>
  
  <pre><code>var htmlString = {
      "div": [{
          "attributes": {
              "class": "myDivClass"
          },
          "p": [{
              "attributes": {
                  "class": "myPClass"
              }
          }]
      }]
  };
  </code></pre>
  
  <p>Now let's add something else:</p>
  
  <pre><code>var htmlString = {
      "div": [{
          "attributes": {
              "class": "myDivClass"
          },
          "p": [{
              "attributes": {
                  "class": "myPClass"
              },
              "span": [{
                  "attributes": {
                      "class": "mySpanClass"
                  }
              }]
          }]
      }]
  };
  </code></pre>
  
  <p>The code I'm working on will have the same sort of shape as:</p>
  
  <pre><code>var childNode = document.createElement("myChildElement");
  for (key in value) {
      if (value.hasOwnProperty(key)) {
          if (key == "attributes") {
              childNode.setAttributes(myAttributes); // loop through attributes on the element
          }
          else {
              //the same code ad infinitum
              var childChildNode = document.createElement("myChildChildElement");
              // etc etc....
          }
      }
  }
  parentNode.appendChild(childNode);
  </code></pre>
  
  <p>The rules of each extra element are the same, so I should be able to just loop down this data structure the same way for both pieces of code, I'm just not sure how, although I'll bet there is a while() loop in there somewhere. Can anyone tell me?</p>
  
  <p>P.S. Native javascript, please, no jQuery! (Although, if you have YUI3 answer I'd be very interested).</p>