为何在此场景下jQuery无法修改innerHTML内容？

问题根源 #

你每次调用$(data)都会把原始HTML字符串重新解析成全新的DOM对象，两次$(data)生成的对象完全独立。你修改第二个对象的内容，根本不会影响原始的data字符串，最后存localStorage的还是没改过的原始内容。

解决步骤 #

• 先把服务器返回的HTML字符串一次性解析成jQuery对象并保存，避免重复解析生成独立对象
• 在这个保存的对象上修改目标元素内容
• 最后把修改后的jQuery对象转换成HTML字符串，再存入localStorage

修改后的代码 #

$.get(`/myUrl`, function(data) {
  if(data){
    // 一次性解析成jQuery对象并保存
    const $content = $(data);
    // 获取目标文本内容
    const internalContent = $content.find('.post-conteudo').html();
    // 处理内容
    const treatedContent = applyChanges(internalContent);
    // 在同一个jQuery对象上修改内容
    $content.find('.post-conteudo').html(treatedContent);
    // 将修改后的DOM对象转为HTML字符串存入localStorage
    localStorage.setItem(`data-post-${idPostCitado}`, $content.html());
  }
});

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