Will the element be visible If it is added to DOM and instantly removed?

Question

Will the element be visible even for a blink of an eye If it is added to DOM and instantly removed?

var feed    = $('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);

console.log(feed.height());

feed.remove();

I've tried the above code on a few browsers and couldn't see the element. But is this behaviour consistent through all platforms/browsers?

Answer 1

After reading your previous question as well, it seems that you very badly want to calculate the display height of an element before actually displaying it. I 'm not entirely clear why you want to do this (it gives off a bad smell), but here's how to anyway.

Put a <div> in your page with height: 0 , overflow: hidden , and the desired width of your element¹. Add the <div> we 're talking about inside that outer helper div (it will not show no matter what), and get its height after the browser performs layout. After that you can proceed however you want (eg by moving the inner <div> to another position in the DOM tree).

¹ it would be best to put it exactly where you want the .entry to end up (ie the .entry and the helper div will end up being siblings).

PS: It's always better for everyone if you mention your real purpose .

Answer 2

I can imagine a situation wherein for the browser to be able to compute the element's effective height, it will have to render it on the window, or at least have the element's box reflow against the current site layout. It might not be visible (as, yeah, it's instantly removed), but a situation like this will reflow the page, and the movement of the affected elements on the page can be seen.

Images come to mind, for example, because browsers generally have no idea what the dimensions of images are until they try to lay them out (correct me if I'm wrong there though).

So, no, I wouldn't say that this is consistent behavior.

Answer 3

Implement it like this. Make a clone of app.twitter_feed, and send it to hell (Coordinates: x:-30000, y:-30000) and try whatever you like there.

var cloneTWFeed = $(app.twitter_feed).clone();
cloneTWFeed.css("position", "absolute").css("top","-30000").css("left","-30000");
var feed = $('<div class="entry"></div>').text(data.status).appendTo(cloneTWFeed);
console.log(feed.height());
feed.remove();

Answer 4

You current code works just fine, but you never get to see the element, since just after you append it, you remove it.

The browser sees it, by the time that he takes to remove it, just after being appended.

See this working Fiddle Example!

There I've replaced the console.log with an alert() to force the browser to wait for my response, thus enabling me to see the element on the page.

Note: Also works fine with console.log(), given me the 18px of height.

---

You either have the remove() wrapped on a timer to actually see the element (visually), or if the HTML markup is to intense, or the desired effect is to only collect data from the element, place your element inside an hidden one, that way you can remove it whenever you've done collecting data from it.

Answer 5

If what you must acheive is an height measurement, try to add the element without visibility (see CSS: http://reference.sitepoint.com/css/visibility )

In a zone of the page that causes no problems on the element flow.