title: Algorithm to update only the changed innerHTML of the document
body: <p>I have 2 JS variables. <code>before</code> and <code>after</code>. They contains the SAME html document, but have some modification. About 1%-10% change between them. I want to update the body from <code>before</code> to <code>after</code>. The variables<code>before</code> and <code>after</code> are raw string.</p>
  
  <p>I can do something like that:</p>
  
  <pre><code>document.documentElement.innerHTML=after
  </code></pre>
  
  <p>The problem is that if I render this way it not look good. The render takes time, and there is a white screen between the renders. I want to show the user 10 modification in a second (video of modifications)</p>
  
  <p>So what I want to do. I want to <strong>search and find</strong> only the elements that changed only by analyze the HTML text of <code>before</code> and <code>after</code>. </p>
  
  <p><strong>My way of solution:</strong></p>
  
  <p>I can find the changes and the position in the text using <a href="https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_diff.html" rel="noreferrer">Javascript Library for diff &amp; match &amp; patch</a>.</p>
  
  <p><strong>The question is:</strong></p>
  
  <p>After I find the text changes. How to find only the elements who changed. I update only those elements.</p>
  
  <p>I thought, maybe to create a range, that contains every change, and update the range, but how exactly to do that?</p>
  
  <p>If anything unclear, please comment, I will explain better.</p>