0

There are some attributes of an html element that cannot be figured out until it is in the HTML DOM such as offsetHeight or offsetWidth. If I createElement('div') and want to use the div's offsetHeight, is there an event that fires when this element is appended to the document so that I know I can now use offsetHeight?

3 Answers 3

1

DOMNodeInserted might be what you are looking for. See https://developer.mozilla.org/en/DOM/DOM_event_reference for details about DOM events

4
  • DOMNodeInserted does work in current browsers but not in IE < 9 and likely not in browsers released a few years from now, since DOM mutation events are deprecated and will be replaced with mutation observers. It's the best you can do for now though.
    – Tim Down
    Apr 16, 2012 at 9:16
  • @TimDown, can you point me to the article where it says such and such features of html/javascript are to be deprecated (want to see what to look out for). Also, in this case, what would you recommend doing? What are the mutation observer events? How/can I use mutation observers now?
    – Derek
    Apr 16, 2012 at 10:33
  • @Derek: Mutation events in DOM3 mentions mutation events being deprecated, as does the current work-in-progress DOM4. I heard about this from the WHATWG and W3C public-webapps mailing lists. Re. mutation observers, I believe they're only available in very recent WebKit browsers, so you can try them out but not really use them on the general web.
    – Tim Down
    Apr 16, 2012 at 11:12
  • @Derek: I'd suggest in this case using DOMNodeInserted (which you can feature test to check for browser support) and fall back to some kind of polling (e.g. regularly checking the new element's parentNode is non-null, or (better) checking that it has a Document ancestor).
    – Tim Down
    Apr 16, 2012 at 11:15
0

No, I don't think there is an event for that. But you can append a property to the newly created element telling your script it is appended. You could do something like:

function appendSignal(el,toElement){
  to.appendChild(el);
  el.isAppended = true;
}

var nwdiv = document.createElement('div');
// do stuff with nwdiv
appendSignal(nwdiv,document.body);
//doing other stuff
if (nwdiv.isAppended) {
  /* nwdiv.offsetHeight should be available... */
}
2
  • There is such an event. See ThiefMaster's answer.
    – Tim Down
    Apr 16, 2012 at 9:57
  • Right, forgot about that. It's not applic. for all browsers though
    – KooiInc
    Apr 16, 2012 at 10:04
0

Some browsers will initialise these attributes as soon as you've added it to the DOM. It needs to be in the DOM so CSS rules can be applied.

So you won't need to receive an event, just adding the element to the DOM as soon as it is created usually works.

But if you find the attributes you need are not initialised immediately, you can separate that code into another function (like you would for an event handler) and invoke it using setTimeout(otherFunction, 0) with no delay. Once your JavaScript has finished executing, the browser will respond to your DOM changes accordingly, and then immediately invoke your other function. This is kind of like having the event, but firing it yourself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.