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 appendChild() function. When I inspect (after adding div) with Firebug, it shows the newly added

Solution 1:

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

Demo: https://jsfiddle.net/iRbouh/dj5j3kLd/

Solution 2:

When you add an element to the DOM with JavaScript, you can't show it directly on the source code, because it is added dynamically. But you can inspect it (right click on the page), and show how DOM element are created by JavaScript.

Solution 3:

You actually want to change your HTML file but it is impossible to do that without any server-side programming. You can't modify actual files on server using only client-side JavaScript.

Only way to do that using JavaScript is server-side script running on Node.js and communicating with your client-side code.