HTML button to save div content using javascript

Question

I need to save content of div using pure javascript. I just edited one fiddle but I can't make it works :(

jsfiddle

<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>

Download

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + document.getElementById("content");
}

Answer 1

Close, you need innerHTML & trigger the click too:

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
    a.click(); // Trigger a click on the element
}

Working Fiddle

Answer 2

In your jsfiddle Java Script is configured to onLoad, which is why download() is not being invoked. Change it to No-Wrap, then you will be able invoke download() on onClick of the button.

update download() as

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + document.getElementById("content").innerHTML;
     a.click();

}

Answer 3

I agree with RGraham. However, if you use jQuery you can do it like this.

<div id="content">
    <h1>Hello world</h1>
    <i>Hi everybody</i>
</div>
<button class="download">Download</button>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $('.download').on('click', function(){
       $('<a />').attr({
              download: 'export.html', 
              href: "data:text/html," + $('#content').html() 
       })[0].click()
    });
</script>

Answer 4

In jsfiddle, you can't run a javascript function inside of html events (like onClick) unless the javascript is contained in tags. (nevermind this)

Try this:

HTML

<div id="content">
    <h1>Hello world</h1>
    <i>Hi everybody</i>
</div>
<button id="download">Download</button>

JS

var download_button = document.getElementById('download');
download_button.onclick = download;

function download(){
    var content = document.getElementById('content')
    console.log(content);
}

updated jsfiddle