Jquery replace html, only where changed

Question

I am cloning a realtime markdown editor, dillinger.io, but in unlike in dillinger when you have embedded a video in the document, but I dont want the video to refresh and flash every time the document is updated, which is very often.

The way the DOM is organized is as follows.

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

The editor in this case is the wonderful Ace editor, which allows me to get the writing inside it by editor.getValue()

Is there an easy known way to do this? I have Googled, found nothing that useful.

This is what I have at the moment

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

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

But I would like to change it to something like this

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

what this would do is stop embedded youtube videos from flashing every time the update happens.

The problem is that I do not have a nice form for the function

replaceWhereDifferent(updateHtml, before)

Some example html strings would be

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

Now say the user changes the p comment to

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

I want that to update without refreshing the video

All of this is code is being generated by a markdown comverter taking code from the Ace editor. So all the markdown is converted together and I cannot discriminate or tag different pieces of the markdown. All I get is the updated html string

Answer 1

Yes, this is possible. You can make use of Google's Incremental DOM or you can take a look at s9e TextFormatter used by Flarum and extract parts that you need.