convert DOM structrue to JSON
<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>

<h2>Not so functional recursive function</h2>

<pre><code>function recursive(element){
    //var classname = element.className.split(' ');
    // element.nodeName == 'UL'
    var json;
    if( element.nodeType == 3 )
        return;
    else{
        //console.log( element.nodeType, element );

        var nodeName = element.nodeName.toLowerCase();
        var nodeClass = element.className.toLowerCase();

        // if this is the SPAN with class 'TITLE', then create an object with the innerHTML as KEY
        // and later the value should be another object, returned from the recursion...
        if( nodeName == 'span' &amp;&amp; nodeClass == 'title' ){
            json = {};
            json[element.innerHTML] = {};
        }
        if( nodeName == 'input' ){
            // if this is an INPUT field, then the SPAN sibling before it is the KEY.
            var key = element.previousSibling.innerHTML;
            var val = element.value;
            json = {};
            json[key] = val;
        }
        // go deeper
        for( var child=0; child &lt; element.childNodes.length; child++ ){
            json = $.extend( {}, recursive( element.childNodes[child] ));
            // if this is a title
            if( nodeName == 'span' &amp;&amp; nodeClass == 'title' ){
                console.warn(json);
                var newJSON = {};
                newJSON[element.innerHTML] = json;
                console.log(newJSON);
            }
        }
        return json;
    }
}


var json = recursive( document.getElementsByTagName('ul')[0] );
</code></pre>
