gpt4 book ai didi

javascript - 将页面保存为 HTML 文件,包括通过 JavaScript/jQuery 新添加的元素

转载 作者:行者123 更新时间:2023-11-28 05:20:59 25 4
gpt4 key购买 nike

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

我的问题是:如何使用 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>

最佳答案

源代码是服务器发送给浏览器的,它不能反射(reflect)实时变化。 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/

关于javascript - 将页面保存为 HTML 文件,包括通过 JavaScript/jQuery 新添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38688568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com