Javascript Jquery仅在更改的地方替换html

我正在克隆一个实时标记编辑器，，但与dillinger不同，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>

但我想把它改成这样

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

这样做可以防止每次更新时嵌入的youtube视频闪烁

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

replaceheredifferent（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>

天哪，这是有史以来最好的视频

我希望在不刷新视频的情况下进行更新

---

所有这些代码都是由一个降价转换程序从中获取代码生成的。所以所有的降价都转换在一起，我不能区分或标记不同的降价部分。我得到的只是更新的html字符串

在DOM元素上放置一个属性，该属性包含上次更新的时间戳。在进行实际更改时增加时间戳，仅当时间戳不同时才更新DOM。

没有“简单”的方法。您必须区分两个html位，然后使用delta做一些有趣的事情

我会采取完全不同的方法来解决这个问题：

当您想要更新html时，使用jQuery将视频标记html放在新的DIV中

使用简单的字符串replace或.HTML（）或其他任何内容替换所有HTML

将视频标记放回应该放的位置

e、 g

---

谢谢你提供的额外信息。现在我们有了一个更清晰的画面。如果您只想更换

，那很容易

JS:

$（'#添加注释'）。单击（函数（）{//用户单击添加注释
var comment=$（'#comment_input'）.val（）；//获取用户的注释
$（'#viewer p'）.html（注释）；//更新查看器的
});

---

我希望这能让您了解如何进行。

是的，这是可能的。您可以使用或查看Flarum使用的，并提取您需要的零件。

有示例代码吗？每种情况都是独特的。我正在寻找一个解决方案…所以我没有代码，我会给出更多的细节更具体地说，这两个html字符串是什么？这有点模糊。你的DOM布局是什么？（页面是如何分解的？）添加了更多内容，基本上我从一个浏览器读取代码，通过一个标记转换器运行代码，并替换div#vieweri的内容如果你猜，这会有多慢/快？我想你移动时仍然会看到一个闪光，替换视频，基本上，我希望视频在更新过程中不受影响。这种解决方案对我不起作用，因为我无法访问单个的p标签，所有旧的和更新的html都是以块的形式出现的

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

$('#placeholder').html($('#videodiv').html()); //1.
$('#divtoupdate').load("/URL/for/newdata");    //2
$('#videodiv').html($('#placeholder').html()); //3

$('#add_comment').click(function(){ //User clicks add comment
  var comment = $('#comment_input').val(); //Get user's comment
  $('#viewer p').html(comment); //update viewer's <p>
});