jQuery HTML元素移除后获取剩余HTML内容的正确姿势

本文旨在解决使用jQuery从自定义HTML字符串中移除元素后，如何正确获取修改后的剩余HTML内容这一常见问题。核心在于理解jQuery对象的一次性创建与持续操作，避免重复解析原始HTML字符串，并通过正确的属性方法（如prop(“outerHTML”)）提取修改后的内容。

理解jQuery对象与DOM操作

在使用jQuery处理HTML字符串时，一个常见的误区是误以为每次调用$(htmlString)都会在内存中持续维护一个可变状态。实际上，$(htmlString)会根据提供的HTML字符串创建一个新的、独立的jQuery对象（以及其内部的DOM结构）。这意味着，如果您多次调用$(htmlString)，每次都会得到一个基于原始HTML字符串的新DOM副本，而不是对之前操作过的对象的引用。

原始问题示例分析：

考虑以下场景，我们有一个包含<h1>标签的HTML字符串，目标是移除<h1>后获取剩余的<div id=”rendered”></div>。

var data = '<h1 id="H9">Hi World</h1'; // 注意这里缺少了结束标签的'>'
var html = '<div id="rendered">' + data + '</div>';
console.log($(html).find('#H9').length); // 第一次创建jQuery对象，并查找H9
$(html).find('#H9').remove();            // 第二次创建jQuery对象，并在其上移除H9。这个对象随后被丢弃。
$('#view').html($(html).filter('#rendered').html()); // 第三次创建jQuery对象，从原始HTML中查找并获取内容。

在上述代码中，每次$(html)的调用都独立地解析了原始的html字符串。当$(html).find(‘#H9’).remove()执行时，它确实从 那个临时创建的 jQuery对象中移除了#H9，但这个临时对象在操作完成后就被垃圾回收了。随后的$(html).filter(‘#rendered’).html()又重新解析了 原始的、未修改的 html字符串，因此#H9依然存在。

立即学习“前端免费学习笔记（深入）”；

正确的HTML元素移除与内容获取策略

要正确地实现目标，关键在于将原始HTML字符串转换为一个jQuery对象 一次，然后所有的修改操作都作用于 这个唯一的 jQuery对象。

步骤：

Upscalepics

在线图片放大工具

44

查看详情

1. 创建单个jQuery对象： 将您的HTML字符串转换为一个jQuery对象，并将其存储在一个变量中。
2. 执行DOM操作： 在这个存储的jQuery对象上执行所有必要的DOM操作，例如find()、remove()等。
3. 提取修改后的HTML： 从这个已经修改过的jQuery对象中提取所需的HTML内容。

示例代码：

以下是修正后的代码，它演示了如何遵循上述策略：

// 假设我们有更完整的HTML结构，并确保HTML语法正确
var data = '<h1 id="H9">Hi World</h1><h2>Keep this</h2>'; // 修正了H1的结束标签，并添加了其他内容
var html = '<div id="rendered">' + data + '</div>';
// 步骤1: 创建单个jQuery对象并存储
const $htmlObject = $(html);
// 步骤2: 在该对象上执行DOM操作
$htmlObject.find('#H9').remove(); // 从 $htmlObject 中移除 #H9 元素
// 步骤3: 从修改后的对象中提取HTML内容
// 使用 .prop("outerHTML") 可以获取包含自身标签的完整HTML
// 如果只需要内部HTML，可以使用 .html()
console.log($htmlObject.filter('#rendered').prop("outerHTML"));
// 将修改后的HTML插入到DOM中
$('#view').html(
$htmlObject.filter('#rendered').prop("outerHTML")
);

HTML结构（用于测试）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="view"></div>

运行上述代码，console.log将输出<div id=”rendered”><h2>Keep this</h2></div>，并且#view元素的内容也将被更新为这个结果，成功移除了#H9元素。

注意事项与最佳实践

• 一次性创建，多次操作： 始终记住将HTML字符串解析为jQuery对象只进行一次，并将其赋值给一个变量（通常以$开头命名，如$myElement），以便后续操作都作用于同一个对象。
• outerHTML vs html()：
  • prop(“outerHTML”)：获取元素及其所有子元素的完整HTML字符串。如果需要获取包含<div id=”rendered”>标签本身的修改后HTML，这是正确的选择。
  • html()：获取元素的内部HTML字符串，不包含元素自身的标签。如果只需要<div id=”rendered”>内部的<h2>Keep this</h2>，则可以使用$htmlObject.filter(‘#rendered’).html()。
• HTML语法正确性： 在处理HTML字符串时，务必确保其语法是正确的。例如，原始问题中</h1缺少了>。不正确的HTML可能会导致jQuery解析错误或行为异常。
• 性能考量： 对于大型HTML字符串或频繁的操作，创建和操作内存中的DOM结构通常比直接拼接字符串更高效和安全，因为它利用了浏览器原生的DOM解析和操作能力。

总结

当使用jQuery对动态生成的HTML字符串进行DOM操作（如移除元素）时，关键在于避免重复地从原始字符串创建新的jQuery对象。正确的做法是，首先将HTML字符串转换为一个jQuery对象并存储起来，然后所有后续的修改操作都应作用于这个单一的、持久的jQuery对象。最后，通过prop(“outerHTML”)或html()方法从修改后的对象中提取最终的HTML内容，从而确保操作的有效性和结果的准确性。