Javascript: unable to get height of newly created element

Question

After updating the DOM with a new element (ei body.append (html)), I cannot immediately get the height of the recently updated element (for example, body.height ()). A partial fix sets the time interval and gets the height at the end of the time interval (setTimeout ("alert (body.height)", 500)).

Any better ideas? How to callback after fully updating DOM? Thank you

Edit: This only happens if there are a lot of events happening in the background (i.e. when the page first loads). It would seem that a page refresh is almost instantaneous if nothing is being processed. I need a callback or indicator of when the DOM is reforming!

Edit: The problem is that the browser is "distracted" from other processes, which causes the browser not to update immediately after adding an item. How to fix it?

Answer 1

The timeout method works because the rendering engine is given the opportunity to display a new element there, giving it a change to render it and thereby assigning it a height.

You can set the timeout to 0 and still have the same effect.

Answer 2

Running jQuery works fine for me.

In jsfiddle demo I will put the following code:

$(function(){ var jTest = $('#test'); console.log('The height:',jTest.innerHeight(),jTest.height()); //Show me 'The height: 20 20' jTest.append('<div><br/>How are you?</div>'); console.log('The height:',jTest.innerHeight(),jTest.height()); //Show me 'The height: 60 60' }); 

If you don't mean the javascript solution only, or put the jsFiddle daemon to show your error.