View HTML of jQuery injected code

Question

I'm thinking of using a couple jQuery tools/plugins to dynamically change the DOM of a page:

http://plugins.jquery.com/project/appendDom

http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/

When the new DOM is changed, I can use Firebug to see the new elements as they are added, but I'm wondering if anyone has suggestions on how I can also build an .html page that can be saved off after a number of elements have been added.

My ultimate goal is to create an HTML Form Builder that will generate the HTML output so I can save the work as I go along. I also want to take the output that was generated and upload it, have it parsed, which will allow me to continue working at another time.

Any thoughts on how to at least get the .html file would be great or tools that I can use.

Answer 1

Assuming that you will just be needing the bits inside the body tag of the page you can get the HTML with document.body.outerHTML.

Answer 2

You can use the native outerHTML:

vat thehtml = $('#yourElement')[0].outerHTML;