StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are three ways you can go about this;</p> <ol> <li><p>Make the element visible, update it, then hide it again.</p></li> <li><p><a href="http://api.jquery.com/detach/" rel="nofollow noreferrer">detach()</a> the element from the DOM, make it visible, update it, hide it, and then re-insert into the DOM.</p></li> <li><p><a href="http://api.jquery.com/clone/" rel="nofollow noreferrer">clone()</a> the element, make it visible, update it, hide it, insert it into the DOM and remove the original element.</p></li> </ol> <p>Approach #2 and #3 are probably your best options, since these won't trigger a re-draw. All operations are done to the elements "outside" of the DOM (in memory, if you will). This way your UI wont jump/skitter/shift. <br /><br /><br /> Approach #3:</p> <pre><code>$(function () { var e = $("..."); var c = e.clone(); c.show(); c.html("..."); c.hide(); e.after(c); e.remove(); }); </code></pre> <p>A shoter version (not tested):</p> <pre><code>var e = $("..."); e.append(e.clone().show().html("...").hide()).remove(); </code></pre> <p><br /><br /> Approach #2:</p> <p><em>Note: you will need a container which you can re-insert the detached element into</em></p> <pre><code>$(function () { var e = $("..."); var c = $("container"); e.detach(); e.show(); e.html("..."); e.hide(); c.add(e); }); </code></pre> <p>And just for good measure - not tested - the shorter version:</p> <pre><code>$("container").add($("...").detach().show().html("...").hide()); </code></pre>

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