Javascript 用AJAX响应中的内容替换网页内容

其思想是用通过ajax调用请求的相同页面替换web页面的内容，但只替换不同的HTML元素

当前我在我的

$中有此功能。ajax

成功回调：

var replace = function(first, second){

  $(first.html() !== second.html())
      first.replaceWith(second);

};

replace($('#container'), response.find('#container'));

这是可行的，但因为内容总是被替换，我看到了“剪辑”效果。ajax请求运行多次，几乎每秒一次，直到某个类从ajax响应添加到容器标记，因此剪辑非常烦人

基本上，我只想替换具有不同html的元素，但不知何故从最后一级开始，以防止替换具有相同html代码的元素

我在这里举了一个小提琴的例子：

因此，在该标记中，只应替换

标记的内容，而不是像现在这样替换整个div，因为只有

是不同的

---

有人对我如何做到这一点有什么建议吗？

如果你能做出一些假设，那么就不难了：

• 假设1：每次标记都完全相同
• 假设2：唯一改变的是某些html标记中的文本

然后您必须知道HTML标记。如果你是一个始终如一的人，那么你的所有动态数据都应该包装在一个类似的标签中——在你的问题中，你提到了一个

标签，所以让我们做第三个假设：

• 假设3：所有动态数据都用
  标记包装

那么你所要做的就是：

var replace = function(first, second) {
    var oldValues = first.find('b'),
        newValues = second.find('b');

    oldValues.each(function(i) {
        if(oldValues[i].textContent != newValues[i].textContent) {
            oldValues[i].textContent = newValues[i].textContent;
        }
    });
};

replace($('#container'), response.find('#container'));

---

注意：这是有效的，因为jQuery的

find（）

按文档顺序返回节点列表-因此假设1非常重要。

我强烈建议使用支持客户端绑定的框架。（示例包括但不限于敲除、把手、角度、下划线）这将比编写低级DOM操作更快地获得更好的结果

---

Knockout.js和underline.js是我的最爱，但是有很多很好的选择。

使用一些双向绑定并使用Knockout或angular来保持模型在ajax数据获取中的最新状态是值得的，还是需要替换很多html？每次获取整个页面似乎很糟糕。

$（first.html（）！==second.html（））

？？？您可以轮询导致出现额外元素的条件，而不是获取完整的html，只有在这种情况下，才可以通过ajax加载html并替换。这不是更好的解决方案吗？我知道，但是内容中有太多的东西需要更新：）如果我以后再添加一些新内容呢？我需要再次更改javascript。。。