jQuery HTML to JSON

I'm using the jQuery template pl开发者_Go百科ugin to generate HTML from JSON data which the user than manipulates (and, potentially alters). I'm looking for a way to read this html back into JSON so I can save it back to my server. jQuery offers a $.tmplItem() method which returns the originally set data JSON but I'm wondering how I can get the values as they are in the current DOM?

How about this?

http://jsfiddle.net/mWuHe/14/

Pull out the HTML of your area, then convert it back to JSON:

$(':button').click(function() {
    $('#output').text(JSON.stringify({ 
        data:$('#input').html() 
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable="true" style="border: 1px solid;width:300px; height:100px;"><b>Edit me!</b> You can use CTRL+B to change bold, ctrl+I to change italics.</div>
<div style="clear:both;">
    <input type="button" value="Get HTML">
</div>
<div id="output" style="border: 1px solid;clear:both;width:300px;height:100px;font-family:courier;font-size:10px;">

</div>

btw I used JSON.stringify for simplicty, but in a production environment you should probably use a library like jquery-json, since some old browsers that don't support that are still skulking around.

The nicest way to get this done will be some sort of data binding, such as the jQuery data link plugin or (perhaps a bit much for your current needs) Knockout.