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

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');

我已经尝试过这个Using jQuery to search a string of HTML，但没有成功。我无法在克隆的 HTML 代码上使用 jQuery。

你知道怎么做吗？

Answer 1

DOM 不是 HTML 字符串。使用 jQuery，您可以进行 DOM 操作，而不是字符串操作。

你正在做的是

• 克隆文档（没有必要，因为无论如何都要将其转换为 HTML），

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

• 将 div 的内容转换为 HTML 字符串

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

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

• 大概将html变量发布到服务器。

很遗憾，html 字符串没有更改，因为您操作的是 DOM 节点，而不是字符串。

---

希望您可以在上面看到，您正在进行各种与您最终想要的东西几乎没有关系的转换。

我不知道你需要这样做，但你需要做的只是一个.clone()，然后是.find().remove()，然后是.html()

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

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

var html = result.html();

Answer 2

可能是这样的？

var html = $('html').clone();
html.find('#some-node').remove();