将页面保存为 HTML 文件，包括通过 JavaScript/jQuery 新添加的元素答案

【问题标题】：Save the page as HTML file including the newly added elements via JavaScript/jQuery将页面保存为 HTML 文件，包括通过 JavaScript/jQuery 新添加的元素
【发布时间】：2016-07-31 21:29:36
【问题描述】：

我有一个 Web 应用程序，它通过 appendChild() 函数使用 JavaScript 添加一个 HTML 元素（如 div）。当我使用 Firebug 检查（添加 div 后）时，它会显示新添加的 div。但是当我在浏览器中看到源代码时，并没有反映出变化。

我的问题是：如何使用 JavaScript 或 jQuery 将新添加的 div 以及其他 HTML 元素保存为 HTML 文件？

源代码：

<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>

【问题讨论】：

保存html页面到底是什么意思？
@jonju 我的意思是自动化类似于文件-> 保存（或另存为）的功能

标签： javascript jquery html

【解决方案1】：

源代码是服务器发给浏览器的，不能反映实时的变化。 Firebug 帮助您检查实时 DOM。通过使用 jQuery，您可以获得页面中任何元素的 HTML，包括整个页面 $("html").html()。现代浏览器支持使用 HTML5 W3C saveAs() 函数和 FileSaver.js 作为 polyfill 来保存文件：

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

演示：https://jsfiddle.net/iRbouh/dj5j3kLd/

【讨论】：

我们中的一个人没有得到这个问题，但现在我们必须学习哪一个？ :D
@jazzgot 我相信 OP 的问题是：如何使用 JavaScriptHTML 页面 /b> 还是 jQuery ？你决定：D
我将 HTML 页面理解为可以从连接到 Internet 的机器上的每个浏览器中显示的页面，并且您将其理解为可以在本地运行的文件。
@IsmailRBOUH 感谢您的回答。它确实有效。
@jazzgot Okey，我现在明白你的理解了！我认为这里的误导性句子是页面的源代码，但是服务器/客户端！你必须从上下文中提取它！

【解决方案2】：

当你使用 JavaScript 向 DOM 添加元素时，你不能直接在源代码上显示它，因为它是动态添加的。但是您可以检查它（在页面上单击鼠标右键），并显示 DOM 元素是如何由 JavaScript 创建的。

【讨论】：

我已经更新了我的问题并添加了代码供您参考。

【解决方案3】：

您实际上想要更改您的 HTML 文件，但 如果没有任何服务器端编程，这是不可能做到的。您不能仅使用客户端 JavaScript 修改服务器上的实际文件。 p>

使用 JavaScript 做到这一点的唯一方法是在 Node.js 上运行服务器端脚本并与您的客户端代码进行通信。

【讨论】：

我可以使用 AJAX 来实现我的目标吗？
当然，但是您仍然需要一些服务器端代码来接收您的 AJAX“消息”。例如，您可以使用简单的 PHP 脚本。
@Asad 您想将此文件保存在您的计算机上还是希望更改在您的网站上可见？
@jazzgot 我想将 html 文件保存在本地计算机上，而不是网站或互联网上。
好的，所以我误解了你，在这种情况下@IsmailRBOUH 给你一个很好的答案。你能试着让未来的读者清楚你的问题吗？ :)