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 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 an HTML file using either JavaScript or jQuery?
Source Code:
<html>
<head>
<title>Page title</title>
<script src=".2.3.min.js"></script>
<script>
$(document).ready(function() {
$('#btnAddtoList').click(function(){
if( $('#inputAddtoList').val() == '' ) {alert("please enter some value."); }
var text = $('#inputAddtoList').val();
var newDiv = $('<div class="listing"><h4>' + text + '</h4></div>');
$('body').append(newDiv);
$('#inputAddtoList').val('');
});
});
</script>
</head>
<body>
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>
</body>
</html>
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 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 an HTML file using either JavaScript or jQuery?
Source Code:
<html>
<head>
<title>Page title</title>
<script src="https://code.jquery./jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
$('#btnAddtoList').click(function(){
if( $('#inputAddtoList').val() == '' ) {alert("please enter some value."); }
var text = $('#inputAddtoList').val();
var newDiv = $('<div class="listing"><h4>' + text + '</h4></div>');
$('body').append(newDiv);
$('#inputAddtoList').val('');
});
});
</script>
</head>
<body>
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>
</body>
</html>
- What exactly do you mean by saving html page? – jonju Commented Jul 31, 2016 at 21:39
- @jonju I mean automating the functionality similar to File-> Save (or Save As) – Asad Commented Jul 31, 2016 at 21:46
3 Answers
Reset to default 6The 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/iRbouh/dj5j3kLd/
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.
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 municating with your client-side code.