Listening to events such as adding new elements in JavaScript

Question

I need to create an event listener such that, when a new element is added to the document, or any of its child, my event handler gets called.

Any ideas how to do this using?

Answer 1

.bind('DOMNodeInserted DOMNodeRemoved')

this are the events to check element is inserted or removed.

bind on parent element this event.

and call your function in handler

js fiddle demo : http://jsfiddle.net/PgAJT/

click here for example... http://help.dottoro.com/ljmcxjla.php

Answer 2

Mutation events are deprecated, use Mutation Observer instead. You can also use arrive.js library, it uses Mutation Observer internally and provides a nice simple api to listen for elements creation and removal.

document.querySelector('#container').arrive('.mySelector', function(newElem){
    // newElem is the newly injected element
});

Answer 3

DOMNodeInserted is deprecated in DOM Level 3 recommendation. using them slows browsers down (they say). depending on what you need it for, it might make sense to trigger a custom event inside the code where you insert the element.