如何用jQuery修改HTML字符串并同步更新原JS对象属性（非真实DOM）

你遇到的问题核心在于：$(myObj.html) 只是把字符串转换成了脱离文档的临时DOM元素，你对这些元素的修改不会自动同步回原字符串，而且.remove()方法返回的是被移除的元素，不是剩下的内容。要同步更新myObj.html，需要把修改后的临时DOM再转回字符串赋值回去。

具体步骤如下：

• 先用一个临时容器（比如<div>）包裹你的HTML字符串，这样后续获取修改后的完整HTML更方便
• 对这个临时容器内的DOM进行操作（比如移除.second元素）
• 最后把临时容器内的HTML内容重新赋值给myObj.html

完整代码示例 #

// 原始的HTML字符串
myObj.html = '<span class="first">la-la-la</span> <span class="second">la-la-la</span>';

// 1. 创建临时容器，把HTML字符串放进去
const tempContainer = $('<div>').html(myObj.html);

// 2. 执行你需要的DOM操作
tempContainer.find('.second').remove();

// 3. 把修改后的HTML同步回myObj.html
myObj.html = tempContainer.html();

// 现在myObj.html的值就是 '<span class="first">la-la-la</span>'

为什么这个方法有效？ #

• $('<div>').html(myObj.html) 会把字符串转换成真实的DOM结构并放在临时<div>里，此时你对tempContainer的所有操作都是在操作真实DOM
• 操作完成后，调用tempContainer.html()会把容器内的DOM结构重新转换成字符串，这样就能得到修改后的结果，再赋值给myObj.html就完成了同步

如果你不想用额外的<div>容器，也可以直接操作$(myObj.html)生成的元素集合，但需要注意：如果原HTML有多个根元素，你需要把它们重新拼接成字符串，比如用.map()和.get().join('')，但用临时容器的方式更简洁不易出错。

内容的提问来源于stack exchange，提问作者User8371