how to save dynamically changed ( byjquery ) html DOM?

Question

I got some nice layout generator using jquery dynamic forms, and jquery ui features to change number of used elements, their css properties etc. Everything looks great but there

Answer 1

Solution using jquery follows:

Step 1:

convert the whole (modified) html to a string representation:

var html = $('html').clone();
var htmlString = html.html();

Step 2:

Base64 encode the htmlString and put it into a datauri inside a hyperlink:

var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlString);
$("body").append("<a href='" + datauri + "'>Save</a>");

Note: I'm using this library for base64 encoding above.

Step 3:

Right-click on the 'Save' link dynamically created above and choose "Save As" from the browser's context menu. Your modified html file will be saved as a new html document on your local filesystem.

I've tried this before and it works. Hope it will work for you and others as well. This solution works without any server-side technology, nor does it require Flash, Java applets, Active-X controls, XPCOM or any proprietary client-side technology. The only thing required is any (modern) browser that supports data-uris.

Answer 2

As a first step you can use

var $alteredHtml = $('html').clone();
// use jQuery here to make alterations to the cloned html (parse it)

but to save it you will need some server side technology, to either save it to a file or a database.

Answer 3

There is another way if you use chrome.

1. Open "development tools" (trl+mayus+i on windows)
2. Go to "elements" tab. You will see the actual (modified) DOM
3. Find the node you are interested (probably HTML or BODY but could be any), right click and select COPY AS HTML
4. Paste in your favorite text editor and save.

The solution provided by tsaixingwei works fine on small DOMs, but when you have large documents it will not work. I've just tried with a doccument containing about 30K lines and had to use the method i've just explained.