Asad Asad - 2 months ago 6x
Javascript Question

Save the page as HTML file including the newly added elements via JavaScript/jQuery

I have a web application that adds an HTML element (like div) using JavaScript via

function. When I inspect (after adding div) with Firebug, it shows the newly added div. But when I see the source code in the browser, it does not reflect the changes.

My question is: How to save the newly added div, along with other HTML elements, as HTML page using either JavaScript or jQuery?

Source Code:

<title>Page title</title>
<script src=""></script>
$(document).ready(function() {
if( $('#inputAddtoList').val() == '' ) {alert("please enter some value."); }
var text = $('#inputAddtoList').val();
var newDiv = $('<div class="listing"><h4>' + text + '</h4></div>');

Enter Question: <BR/><textarea id="inputAddtoList" rows="5" cols="50" placeholder="Enter Question Here..." autofocus></textarea>
<button id="btnAddtoList">Add Question</button>
<BR /><BR />
<strong>Question :</strong>



The source code is what the server sent to the browser, it can't reflect the live changes. Firebug helps you to inspect live DOM. By using jQuery you can get the HTML of any element in your page including the whole page $("html").html(). Modern browsers support saving files by using HTML5 W3C saveAs() function and the FileSaver.js as polyfill:

var blob = new Blob([$("html").html()], {type: "text/html;charset=utf-8"});
saveAs(blob, "page.html");