Databases
StackOverflow2013
Postsdbo
POWhy is element empty in IE after being removed from the DOM?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is element empty in IE after being removed from the DOM?
    text
    copied!<p>The following HTML and JavaScript is taken from parts of this jsFiddle: <a href="http://jsfiddle.net/stephenjwatkins/2j3ZB/3/" rel="nofollow">http://jsfiddle.net/stephenjwatkins/2j3ZB/3/</a></p> <p>HTML:</p> <pre><code>&lt;p class="source"&gt; Source &lt;/p&gt; &lt;div id="target"&gt; &lt;p class="dummy"&gt; Target &lt;/p&gt; &lt;/div&gt; &lt;button id="transfer-button"&gt;Transfer&lt;/button&gt; </code></pre> <p>JavaScript:</p> <pre><code>var sourceEl = $('.source'); var targetEl = $('#target'); $('#transfer-button').click(function() { targetEl.html('&lt;p class="dummy"&gt;Transferring...&lt;/p&gt;'); setTimeout(function() { // Source element will be empty on second attempt to append targetEl.html('').append(sourceEl); }, 750); return false; });​ </code></pre> <p><em>Note that the setTimeout and dummy text is there simply for a visual indicator.</em></p> <p>As one can see, after the source element is appended and removed once from the DOM, IE (all versions) will add an empty element to the DOM upon any further appends; whereas, all other browsers will add the correct, non-empty element.</p> <p>Another aspect that adds to the confusion is that the sourceEl still has element information (e.g. <code>sourceEl.attr('class')</code> will return "source").</p> <p>I know of methods to mitigate the issue (e.g. <code>sourceEl.clone()</code>), but it would be nice to have a better understanding as to why IE is behaving differently to avoid any related problems in the future.</p> <p><strong>What is causing the source element to be uniquely empty in IE after once replacing the element?</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload