Javascript 从ajax和liquid动态修改DOM差异

我已经编写了一个实现，可以在HTML中动态使用，并由JavaScript解析。反过来，我使用AJAX来提供数据源。这看起来像这样：

<div id="container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
    {% for user in users %}
      <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

现在，假设每隔一段时间就会调用

$.ajax

，那么

#container

的内容就会用任何可能发生更改的内容进行更新。这样做的问题是，所有的内容都会重新加载，而不仅仅是更改的内容；您可以随意选择文本，例如“活动”选项卡等

为了解决这个问题，我一直使用在替换之前比较两个呈现的字符串，这反过来给了我每个更改的位置，这样我就可以在HTML中循环并修改它们

在完成所有这些工作后，我开始意识到我的计划中有一件非常致命的事情：

template.innerHTML[###] = 'new content';

根本不起作用。显然，我不能基于元素的字符串索引修改元素的innerHTML

我做错了什么？有没有更简单的方法

无论您推荐什么，请记住我无法控制DOM元素。解析的任何液体都需要对其替换逻辑不可知（即，我不能使用ID、类等）

我能想到的唯一解决办法是：

• 不知何故，在工作之外，我要做的就是。。。那太好了
• 创建DOM diff match修补程序并以这种方式处理（或者使用浏览器中存在的修补程序？）

template.innerHTML[###] = 'new content';