title: convert HTML DOM structure to JSON
body: <p>I have wasted so much time on this..the recursion part is quite illusive.<br/>
  for a given HTML structure, of unknown depth, I need to convert to JSON.<br/>
  <em>(I use this from some YAML i18n translation system I am building)</em></p>
  
  <p>my general idea is to go deep until it finds the <code>INPUT</code>, then create an
  object with the key/value of the <code>span.innerHTML/input.value</code>, and return that
  object, so it will be the VALUE of a KEY that is the last <code>&lt;span class="title"&gt;</code> reached.</p>
  
  <p>(Yes, it's a bit complicated but very interesting to develop)<br/></p>
  
  <p><a href="http://jsbin.com/iziwim/edit#source" rel="nofollow">JSBIN playground</a> - live code example</p>
  
  <p><strong>I can't get my recursive function to work properly, to output the JSON I want...</strong></p>
  
  <h2>HTML structure</h2>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;span class="title"&gt;footer&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;span&gt;statement&lt;/span&gt;
                  &lt;input type="text" value="xxx"&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span class="title"&gt;landing&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;span&gt;page_title&lt;/span&gt;
                  &lt;input type="text" value="yyy"&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span&gt;page_sub_title&lt;/span&gt;
                  &lt;input type="text" value="xxx"&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;span class="title"&gt;pricing&lt;/span&gt;
              &lt;ul class="level11"&gt;
                  &lt;li&gt;
                      &lt;span&gt;title&lt;/span&gt;
                      &lt;input type="text" value="aaa"&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;span&gt;cost&lt;/span&gt;
                      &lt;input type="text" value="xxx"&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><br/></p>
  
  <h2>(Wanted) JSON output</h2>
  
  <pre><code>{
      footer : {
          statement : 'xxx'
      },
      landing : {
          page_title : 'yyy',
          page_sub_title : 'xxx',
          pricing : {
              title : 'aaa',
              cost : 'xxx'
          }
      }
  }
  </code></pre>