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 is one problem with presentation of current result. I would like to save generated html DOM and parse it somehow ( delete hidden elements from DOM tree etc ). Any ideas how to save current (modified) html + css?

If you need to save it to a file, then you can use Firebug for it. It will also show the changes that JQury have made to the dom tree. — Tyde
– Tyde, Commented Dec 21, 2010 at 10:36
Is there a way to do that by node.js? I mean can I create js script, that I could run from command line using node.js that would do html-file -> html-file transformation? — Hurda
– Hurda, Commented Feb 12, 2015 at 21:59

jpaugh · Accepted Answer · 2019-07-15 22:27:56Z

15

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.

edited Jul 15, 2019 at 22:27

jpaugh

7,1845 gold badges46 silver badges94 bronze badges

answered Jul 23, 2011 at 17:58

tsaixingwei

7569 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrec Over a year ago

I've been thinking along similar lines, but anyone going this route should be aware of the wide variations in supported data URI length. See John Saunders' answer in particular.

jpaugh Over a year ago

Good ol' client-side JavaScript: The link for this still works, even on the Web Archive; so it was not relying on a server-side component.

Gabriele Petrioli · Accepted Answer · 2010-12-21 11:10:51Z

0

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.

answered Dec 21, 2010 at 11:10

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

ButterDog · Accepted Answer · 2012-07-27 06:34:28Z

0

There is another way if you use chrome.

Open "development tools" (trl+mayus+i on windows)
Go to "elements" tab. You will see the actual (modified) DOM
Find the node you are interested (probably HTML or BODY but could be any), right click and select COPY AS HTML
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.

answered Jul 27, 2012 at 6:34

ButterDog

5,2536 gold badges47 silver badges62 bronze badges

Collectives™ on Stack Overflow

how to save dynamically changed ( byjquery ) html DOM?

3 Answers 3

Step 1:

Step 2:

Step 3:

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Step 1:

Step 2:

Step 3:

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related