如何在JS中同步HTML片段而不替换全部内容？

我希望基于服务器渲染的HTML片段动态更新页面，最初采用的方案是从服务器获取片段后，通过.innerHTML更新目标区域，但这种方式存在两个核心问题：

• 用户选中动态内容中的文本时，哪怕选中的文本没变化，选中状态也会被清除。比如选中foo后，更新操作会清除选中状态，但该文本实际并未改变。
• 附加到元素上的任何状态都会被删除。我的页面动态内容里有一些按钮，请求处理时会显示加载指示器，虽然内容变化时指示器消失是可接受的，但每秒都清除状态会让指示器完全失效。

我想知道有没有简便方法仅更新发生变化的元素，尤其是在元素可能被添加、删除或重新排序的场景下。

示例代码 #

JavaScript #

let counter = 0;

setInterval(() => {  
  counter++;
 
  // 假设这段内容是从服务器获取的
  content = '<ul><li>foo</li><li>'+counter+'</li><li>bar</li></ul>'; 
  
  document.getElementById("dynamic-content").innerHTML = content;
}, 1000);

HTML #

<div>
  <h1>my page</h1>
  <div id="dynamic-content">
      <ul>
        <li>foo</li>
        <li>0</li>
        <li>bar</li>
      </ul>
  </div>
</div>

要实现仅更新变化元素的需求，可以从以下几种方向入手：

1. 基于DOM Diff的轻量方案 #

可以借助DOM Diff逻辑对比新旧内容的差异，只更新变化部分，同时保留未变化元素的状态：

• 手动实现简易Diff：先将新HTML转为DOM节点，再和目标区域的现有DOM逐一对比：文本内容变化的元素直接更新文本；新增元素插入对应位置；不存在的元素则移除。这种方式适合简单场景，无需额外依赖。
• 使用轻量DOM Diff库：比如morphdom这类工具，它能高效对比两个DOM节点，自动处理增删改操作，同时保留元素的选中状态、自定义属性等。

示例代码（以morphdom为例）：

let counter = 0;

setInterval(() => {  
  counter++;
  // 将服务器返回的HTML转为临时DOM节点
  const newContent = document.createElement('div');
  newContent.innerHTML = '<ul><li>foo</li><li>'+counter+'</li><li>bar</li></ul>';
  
  const target = document.getElementById("dynamic-content");
  // 仅更新差异部分
  morphdom(target, newContent);
}, 1000);

2. 服务器返回结构化数据而非HTML #

如果服务器可以返回JSON格式的结构化数据（比如列表项数组），前端可以精准控制DOM更新：

• 先对比新旧数据的差异，找出新增、删除、修改的项。
• 对修改的项，直接更新对应DOM元素的文本或属性；新增项创建DOM节点插入；删除项移除对应DOM元素。这种方式完全保留未变化元素的状态，灵活性更高。

示例代码：

let counter = 0;
const targetUl = document.querySelector("#dynamic-content ul");

setInterval(() => {  
  counter++;
  // 假设从服务器获取的结构化数据
  const newData = ['foo', counter.toString(), 'bar'];
  const currentItems = Array.from(targetUl.children);
  
  // 更新或新增项
  newData.forEach((itemText, index) => {
    if (index < currentItems.length) {
      // 仅文本变化时更新
      if (currentItems[index].textContent !== itemText) {
        currentItems[index].textContent = itemText;
      }
    } else {
      // 新增列表项
      const li = document.createElement('li');
      li.textContent = itemText;
      targetUl.appendChild(li);
    }
  });
  
  // 删除多余的项
  while (currentItems.length > newData.length) {
    targetUl.removeChild(currentItems.pop());
  }
}, 1000);

3. 用Web Components封装动态内容 #

将动态内容封装为自定义元素，内部管理自身的更新逻辑，仅在数据变化时更新对应部分。这种方式能隔离元素状态，避免全局DOM更新带来的问题，适合复杂的动态组件场景。

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