克隆HTML并使用jQuery删除一些节点

Question

我正在使用Chrome DevTools开发一个用于实时编辑的小工具,我有一个小按钮"保存",它抓取HTML并将其发送到服务器以使用Ajax更新静态文件(.html).确实很简单.

我的问题是我需要在将HTML代码发送到服务器之前对其进行过滤,我需要删除一些节点,并且我正在尝试使用jQuery实现这一点,如下所示:

// I grab all the HTML code
var html = $('<div>').append($('html').clone()).html();
// Now I need to remove some nodes using jQuery
$(html).find('#some-node').remove();
// Send the filtered HTML to server
$.post('url/to/server/blahblahblah');

我已经尝试过使用jQuery搜索HTML字符串但没有成功.我无法在克隆的HTML代码上使用jQuery.

有关如何做到这一点的任何想法？

Answer 1

DOM不是HTML字符串.使用jQuery,您可以执行DOM操作,而不是字符串操作.

你在做什么

• 克隆文档(不必要,因为你无论如何都将它转换为HTML),

• div出于某种原因将克隆文档附加到新文档中

• 将其内容转换为divHTML字符串

• 将该HTML转换回DOM节点$(html) (所以我们回到上面的第一点)

• 查找和删除这些节点中的元素

• 可能是将html变量发布到服务器.

不幸的是,html字符串没有改变,因为你操纵了DOM节点,而不是字符串.

希望您可以在上面看到,您正在进行各种与您最终想要的内容无关的转换.

我不知道WNY你需要做到这一点,但你需要的是做一个.clone(),然后.find().remove(),再.html()

var result = $("html").clone(false);

result.find("#some-node").remove();

var html = result.html();