title: Why DOM changes are not visible in the function that changes DOM?
body: <p>I have the JS/jQuery code:</p>
  
  <pre><code>function swapElements(parent, i) {
       var a = parent.eq(i);
       var b = parent.eq(i + 1);
  
       var atemp = a.clone();
       var btemp = b.clone();
  
       a.replaceWith(btemp);
       b.replaceWith(atemp);
  
       debugOutput(); // instead of some actions
   }
   swapElements(parent, i);
  </code></pre>
  
  <p>But the <code>debugOutput</code> function sees old unchanged version DOM.</p>
  
  <p>I have tried to use <code>MutationObserver</code> and <code>setTimeout</code> to call <code>debugOutput</code> but got nothing.</p>
  
  <p>However if I manually check the DOM from another function:</p>
  
  <pre><code>$("button").click(function () {
      debugOutput();
  });
  </code></pre>
  
  <p>then <code>debugOutput</code> see new changed DOM immediately.</p>
  
  <p>Why this is happening? How can I work with changed DOM directly after <code>replaceWith</code> in <code>swapElements</code>?</p>
  
  <p>Thank you for any help.</p>