Asad Asad - 2 months ago 5x
jQuery Question

Save newly added html elements using JavaScript or jQuery

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

function. When I inspect (after adding div) with Firebug, it shows the newly added div. But when I see the source code of the page, it does not shows there.

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");