通过JavaScript / jQuery将页面另存为HTML文件，包括新添加的元素
[英]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. 
我有一个Web应用程序，它通过JavaScript通过appendChild()函数添加了HTML元素（如div）。 When I inspect (after adding div) with Firebug, it shows the newly added div. 当我使用Firebug检查（添加div之后）时，它显示了新添加的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? 我的问题是：如何使用JavaScript或jQuery将新添加的div以及其他HTML元素另存为HTML文件？
Source Code: 源代码：
<html>
<head>
<title>Page title</title>
<script src="https://code.jquery.com/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>
3 个解决方案
解决方案1
5 已采纳 2016-07-31 21:47:18
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. Firebug可帮助您检查实时DOM。 By using jQuery you can get the HTML of any element in your page including the whole page $("html").html() . 通过使用jQuery，您可以获得页面中任何元素的HTML，包括整个页面$("html").html() 。 Modern browsers support saving files by using HTML5 W3C saveAs() function and the FileSaver.js as polyfill: 现代浏览器通过使用HTML5 W3C saveAs（）函数和FileSaver.js作为polyfill支持保存文件：
var blob = new Blob([$("html").html()], {type: "text/html;charset=utf-8"});
saveAs(blob, "page.html");
Demo: https://jsfiddle.net/iRbouh/dj5j3kLd/ 演示： https : //jsfiddle.net/iRbouh/dj5j3kLd/
解决方案2
0 2016-07-31 21:39:04
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. 当您使用JavaScript将元素添加到DOM时，您无法直接在源代码上显示它，因为它是动态添加的。 But you can inspect it (right click on the page), and show how DOM element are created by JavaScript. 但是您可以检查它（右键单击页面），并显示JavaScript如何创建DOM元素。
解决方案3
0 2016-07-31 21:39:34
You actually want to change your HTML file but it is impossible to do that without any server-side programming. 您实际上是想更改HTML文件，但是如果没有任何服务器端编程，就不可能这样做。 You can't modify actual files on server using only client-side JavaScript. 您不能仅使用客户端JavaScript来修改服务器上的实际文件。
Only way to do that using JavaScript is server-side script running on Node.js and communicating with your client-side code. 使用JavaScript的唯一方法是在Node.js上运行并与客户端代码进行通信的服务器端脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.