How to save html that was modified on the browser (the DOM) with Javascript/jQuery

Question

First of all let me clarify that what I'm trying to do is for locally use only, users will have direct access to the html page.

What I'm trying to do is basically append and save text to an HTML file.

This is what I have.

HTML (index.html)

<div id="receiver"></div>
<button id="insertButton">Insert</button>

JS

$(document).ready( function() {
    $('#insertButton').click(function(){

        $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');
    })
});

What I don't know is how to save the file (index.html) after the appending. Any idea how to do that? Is this even possible with Javascript or jQuery?

You need to save the edited file on the server? You can't do this only with javascript - you need a server-side language. — Al.G., Nov 01 '14 at 13:47
you can give id to tag and then after appending the content you can get the html ... you wont be able to save on server ( if you trying to do because it is executing on client machine ) thn you can use something like this.. http://stackoverflow.com/questions/4439296/save-or-download-javascript-string-as-a-file.. In my opinion.. Also to save on server or download using php just after appending the content u can make ajax call to server php page... hope it helps... — Ahmad, Nov 01 '14 at 13:48

score 3 · Answer 1 · answered Nov 01 '14 at 15:05

3

You could change your handler to do this:

$(document).ready( function() {
    $('#insertButton').click(function(){

        $('#receiver').append('<h1>Hi,</h1>','<p>How are you?</p>');

        // Save the page's HTML to a file that is automatically downloaded.

        // We make a Blob that contains the data to download.
        var file = new window.Blob([document.documentElement.innerHTML], { type: "text/html" });
        var URL = window.webkitURL || window.URL;

        // This is the URL that will download the data.
        var downloadUrl = URL.createObjectURL(file);

        var a = document.createElement("a");
        // This sets the file name.
        a.download = "source.htm";
        a.href = downloadUrl;

        // Actually perform the download.
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    })
});

You should take a look at the compatibility matrix and documentation of URL over at MDN. Notably URL is not available for IE 9 or earlier. Same for Blob.

answered Nov 01 '14 at 15:05

Louis

146,715
28
274
320

It worked in Chrome. Is there a way to specify the URL for where to download it and ultimately overwrite the existing one with the new one? Thanks – fs_tigre Nov 01 '14 at 18:47
"where to download it". You mean where in the filesystem it would be saved? At best we can suggest a file name with the `download` attribute. Ultimately, the browser decides where it will be saved either on the basis of a default configuration or by prompting the user. And the browser decides what happens in the case of an overwrite. It would be a security hole otherwise. "Here's a nice little file for you to download as `~/.login`." (If you're not familiar with *nix, it would be terrible to allow such a download.) – Louis Nov 01 '14 at 18:55
Ok, apparently Javascript is not the right technology for the task I want to accomplish due to reasonable limitations (security). I wanted to modify and save the file simesly like if it would be an online or desktop application. I will look into some other alternatives. Thanks a lot for your help. – fs_tigre Nov 02 '14 at 14:33

score 0 · Answer 2 · answered Nov 01 '14 at 14:23

If I understand it correctly, you need it on local machine and for temporary usage then you can store it in cookies. So whenever you load the page, check if cookie available, if yes then load data from cookies or load the fresh data. You can use this data, unless and until cookies are not cleared.

Hope this helps...

score -1 · Answer 3 · answered Nov 01 '14 at 13:44

-1

Don't need any javascript. After the html is appended, just press Ctrl+S to save the file locally with modified html.

answered Nov 01 '14 at 13:44

Amit Joki

58,320
7
77
95

1

afaik it will save the loaded content not the dynamically added content... correct if im wrong... – Ahmad Nov 01 '14 at 13:45
What I don't like about this approach is the fact that you need to specify the name and location every time you save (ctrl+s). Thanks – fs_tigre Nov 01 '14 at 13:50

How to save html that was modified on the browser (the DOM) with Javascript/jQuery

3 Answers3