Why DOM changes are not visible in the function that changes DOM?
<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>