By Colin Dumitru


2014-06-19 17:45:11 8 Comments

As the title suggests, I want to detect the exact timestamp when an element with a particular id or CSS class is inserted into the DOM (and possibly detect when it is removed). The most obvious method is to poll the document periodically, by calling document.getElementById with the id of the element I want to find, but this method is not very accurate and can be very performance intensive if I have multiple elements I want to detect.

I took a look at Mutation Events and Mutation Observers, but from what I understand, in order to detect if an element is inserted or removed, I have to add a listener to the root DOM element, which can heavily impact performance if I need to execute additional JS each time an element is inserted or removed from the page.

Is there a more optimized solution that I am not aware of? Also, I would prefer if I didn't use an external JS library, even jQuery.

2 comments

@schettino72 2014-08-03 17:11:28

iframe elements trigger load/unoad events. You can insert a dumb iframe in the element you want to watch... And trigger a 'load' event in the original element yourself.

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

Full example

@Colin Dumitru 2014-06-20 08:58:58

It turns out there is a more efficient way to detect when a particular node is inserted, by using CSS animation events.

You can define an unnoticeable animation to the class you are listening for, lets say widget_inserted:

@keyframes widget_inserted {  
    from { z-index: 1; }
    to { z-index: 1; }   
}

.widget {
    animation-duration: 0.001s;
    animation-name: widget_inserted;
}

I've chosen the z-index property because in most cases it should have virtually no added effects on the element which is inserted. Combined with a very short animation duration, these added CSS properties should produce no additional changes to the original document.

So now if you attach an animationstart event listener to the document, you should be able to catch the exact moment when an element with the widget class is inserted:

document.addEventListener('animationstart', function(event) {
    if (event.animationName == 'widget_inserted') {
        ...
    }
});

You can view a live demo here

@T.CK 2019-03-16 17:23:18

I love this! I turned it into a function that updates a stylesheet with anything I'm waiting for to load into the DOM.

Related Questions

Sponsored Content

68 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

52 Answered Questions

[SOLVED] What is the best way to detect a mobile device?

39 Answered Questions

[SOLVED] Most efficient way to create a zero filled JavaScript array?

  • 2009-08-18 18:11:29
  • dil
  • 325294 View
  • 565 Score
  • 39 Answer
  • Tags:   javascript arrays

7 Answered Questions

[SOLVED] Most efficient way to convert an HTMLCollection to an Array

3 Answered Questions

[SOLVED] Is there any non-polling way to detect when a DOM element's size or position have changed?

  • 2012-12-02 05:42:20
  • Daniel Yankowsky
  • 4853 View
  • 27 Score
  • 3 Answer
  • Tags:   javascript dom

12 Answered Questions

[SOLVED] What is the most efficient way to create HTML elements using jQuery?

1 Answered Questions

[SOLVED] Detect, change or remove existing mutation observer

6 Answered Questions

1 Answered Questions

Sponsored Content