jQuery替换html，仅在更改的地方

Question

我正在克隆一个实时降价编辑器dillinger.io，但与dillinger不同，当您将视频嵌入文档中时，但我不希望每次文档更新时都刷新并刷新视频，这种情况非常常见。

DOM的组织方式如下。

<div id='editor'></div>
<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>What a dull video</p>
</div>

在这种情况下，该编辑器是出色的Ace编辑器，它使我可以通过editor.getValue()

有一种简单的已知方法可以做到这一点吗？我已经用Google搜索，发现没有什么有用的。

这就是我目前所拥有的

function update(){
    var mk = editor.getValue();
    var updatedHtml = converter.makeHtml(mk);
    $('#viewer').html(updatedHtml); 
}

editor.getSession().on('change', function(e) {
    update();
});

但我想将其更改为这样的内容

function update(){
    var before = $('#viewer').html();   
    var mk = editor.getValue();
    var updateHtml = converter.makeHtml(mk);
    $('#viewer').replaceWhereDifferent(updateHtml, before); 
}

这样做是为了防止嵌入的youtube视频在每次更新时都闪烁。

问题是我没有一个很好的函数形式

replaceWhereDifferent(updateHtml, before)

一些示例html字符串将是

<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>comment</p>
</div>

现在说用户将p注释更改为

<p>OMG thats the best video ever</p>

我希望更新而不刷新视频

所有这些都是由Markdown转换器从Ace编辑器获取代码生成的代码。因此，所有降价促销都将一起转换，因此我无法区分或标记降价促销的不同部分。我所得到的只是更新的html字符串

Answer 1

在 DOM 元素上添加一个属性，其中包含上次更新时间的时间戳。当实际发生更改时增加时间戳，仅在时间戳不同时才更新 DOM。