Question

我使用jquery动态表单获得了一些不错的布局生成器，jquery ui功能可以更改已使用元素的数量，它们的css属性等。一切看起来都很棒但是当前结果的呈现存在一个问题。我想保存生成的html DOM并以某种方式解析它（从DOM树中删除隐藏的元素等）。任何想法如何保存当前（修改）的html + css？

Answer 1

使用jquery的解决方案如下：

第1步：

将整个（修改过的）html转换为字符串表示形式：

var html = $('html').clone();
var htmlString = html.html();

第2步：

Base64编码htmlString并将其放入超链接中的数据库中：

var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlString);
$("body").append("<a href='" + datauri + "'>Save</a>");

注意：我在上面使用此库进行base64编码：http://hpyer.cn/codes/jquery-plugin-base64-encode-and-decode

第3步：

右键单击上面动态创建的“保存”链接，然后从浏览器的上下文菜单中选择“另存为”。您修改的html文件将保存为本地文件系统上的新html文档。

我之前尝试过这个并且它有效。希望它对你和其他人也有用。此解决方案无需任何服务器端技术，也不需要Flash，Java小程序，Active-X控件，XPCOM或任何专有的客户端技术。唯一需要的是支持数据uris的任何（现代）浏览器。

Answer 2

作为第一步，您可以使用

var $alteredHtml = $('html').clone();
// use jQuery here to make alterations to the cloned html (parse it)

但要保存它，您需要一些服务器端技术，将其保存到文件或数据库。

Answer 3

如果使用chrome，还有另一种方法。

打开“开发工具”（Windows上的trl + mayus + i）
转到“元素”标签。您将看到实际（修改过的）DOM
找到您感兴趣的节点（可能是HTML或BODY但可以是任何节点），右键单击并选择COPY as HTML
粘贴到您喜欢的文本编辑器中并保存。

tsaixingwei提供的解决方案适用于小型DOM，但是当你拥有大型文档时，它将无法正常工作。我刚刚尝试了一个包含大约30K行的文档，并且必须使用我刚刚解释过的方法。

如何保存动态更改（byjquery）html DOM？

3 个答案:

第1步：

第2步：

第3步：