Is there ‘element rendered’ event?

by

The accepted answer is from 2014 and is now outdated. A setTimeout may work, but it’s not the cleanest and it doesn’t necessarily guarantee that the element has been added to the DOM.

As of 2018, a MutationObserver is what you should use to detect when an element has been added to the DOM. MutationObservers are now widely supported across all modern browsers (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, etc).

When an element has been added to the DOM, you will be able to retrieve its actual dimensions.

Here’s a simple example of how you can use a MutationObserver to listen for when an element is added to the DOM.

For brevity, I’m using jQuery syntax to build the node and insert it into the DOM.

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

The observer event handler will trigger whenever any node is added or removed from the document. Inside the handler, we then perform a contains check to determine if myElement is now in the document.

You don’t need to iterate over each MutationRecord stored in mutations because you can perform the document.contains check directly upon myElement.

To improve performance, replace document with the specific element that will contain myElement in the DOM.

More Related Contents:

  1. How to find event listeners on a DOM node in JavaScript or in debugging?
  2. Remove element by id
  3. Check if an image is loaded (no errors) with jQuery
  4. Check if an element contains a class in JavaScript?
  5. How do you check if a JavaScript Object is a DOM Object?
  6. Chrome extension – retrieving global variable from webpage
  7. innerText vs innerHTML vs label vs text vs textContent vs outerText
  8. Why is the value of my input always empty if I store it in a variable?
  9. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  10. What is the “hasClass” function with plain JavaScript?
  11. How to convert a DOM node list to an array in Javascript?
  12. Is there a DOM event that fires when an HTML select element is closed?
  13. How to use getElementsByClassName in javascript-function? [duplicate]
  14. Using this inside an event handler
  15. How to scroll down with Phantomjs to load dynamic content
  16. Difference between Element.value and Element.getAttribute(“value”)
  17. Why is the variable holding the input value always logged as empty?
  18. Are event handlers in JavaScript called in order?
  19. HTML DOM: Which events do not bubble?
  20. Converting a recursive function into an asynchronous CPS implementation (javascript)
  21. In JavaScript, what is the best way to convert a NodeList to an array?
  22. How to avoid no-param-reassign when setting a property on a DOM object
  23. window.getSelection() gives me the selected text, but I want the HTML
  24. What is the difference between `firstChild` and `firstElementChild`?
  25. What damage is done by document.write()? [duplicate]
  26. Javascript DOM: Setting custom DOM element properties
  27. How can I remove wrapper (parent element) without removing the child?
  28. How to prevent an iframe from reloading when moving it in the DOM
  29. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment