How can I detect when a new element has been added to the document in jquery?

Question

How can I detect when a new element has been added to the document in jquery ?

Explanation: I want to know when an element with class "column-header" has been added to the document. As I plan to run some javascript on those elements.

How can I do this ? I use jQuery javascript library.

Answer 1

The accepted answer uses an obsolete plugin from 2011 and the highest upvoted answer uses Mutation events which are now deprecated.

Today, 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).

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.

Answer 2

$(document).bind('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

DOMNodeInserted is a DOM level 3 Event. That in turn means, you need a fairly new browser to support that kind of event.

Reference: MDC

Answer 3

If you want to do some jQuery on it, you can also do something like livequery (extra plugin):

$('column-header').livequery(function()
{
    // do things here with your column-header, like binding new events and stuff.
    // this function is called when an object is added.
    // check the API for the deletion function and so on.
});

UPDATE: It seems that the link was broken. Try this link

Answer 4

I would use setInterval to repeatedly check for element. eg.

var curLength=0;
setInterval(function(){
  if ($('.column-header').length!=curLength){
    curLength=$('.column-header').length;
    // do stuff here
  }
},100);

this code will check for any new .colum-header elements every 100 ms

Answer 5

I think the DOMNodeInserted method mentioned above is probably the sexiest choice, but if you need something that is going to work with IE8 and lower, you could do something like the following:

// wrap this up in en immediately executed function so we don't 
// junk up our global scope.
(function() {
   // We're going to use this to store what we already know about.
   var prevFound = null;

   setInterval(function() {
      // get all of the nodes you care about.
      var newFound = $('.yourSelector');

      // get all of the nodes that weren't here last check
      var diff = newFound.not(prevFound);

      // do something with the newly added nodes
      diff.addClass('.justGotHere');

      // set the tracking variable to what you've found.
      prevFound = newFound;
   }, 100);
})();

That is just the basic idea, you can change that however you want, make a method out of it, keep the return value of the setInterval so you can stop it, or whatever you need to do. But it should get the job done.

Answer 6

You should check out the jQuery Mutation Events. I believe that it is what you are looking for.

Answer 7

Up to 2013 MutationEvents are deprecated. If anyone else has got problems detecting new elements in the dom, you can use MutationObservers Instead: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 8

if you want to set same functions for all the elements with class column-header Then you may use jquery live()

$(".column-header").live("click",function(){});

Answer 9

How about using a poll - keep searching for an element with class "column-header", until you find it and then perform action. Seems simple.

Answer 10

Just change this function call (observing).

Parameter 1 - Which element to monitor
Parameter 2 - Which element will trigger the function (parameter 3) when appears.
Parameter 3 - Function triggered


    observing('div#application', 'div.viewContainer', function(mutation){
        console.log('Mutation:', mutation)
    })

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
/* Observing Easy */
function observing(who, forWhat, callBack){
    var observer = new MutationObserver(function(mutations) {
        
        mutations.forEach(mutation => {
            console.log(mutation.addedNodes[0])
            if ( mutation.addedNodes[0].matches(forWhat)){
                console.log('MATCH!');
                if(callBack!==undefined){
                    callBack(mutation)
                }
            }else{
                console.log('%cNOT match', 'color: #f00');
            }
        });

    });

    observer.observe($(who)[0], {attributes: false, childList: true, characterData: false, subtree:false});
}

$(document).ready(function(){

    
    /* Observing Usage */
    observing('div#application', 'div.viewContainer', function(mutation){
        console.log('Mutation:', mutation)
    })

    

    /* Adding Elements for Test */ 
    $("#application").append($("<div>Hello World</div>")[0]);
    $("#application").append($("<div class='contentFake'>ContentClassFAKE</div>")[0])
    $("#application").append($("<div class='contentFake'>ContentClass1</div>")[0])
    $("#application").append($("<div class='viewContainer'>ContentClass2</div>")[0])

    setTimeout(function(){
        $("#application").append($("<div class='contentFake'>ContentClass3</div>")[0])
    }, 1000)

    setTimeout(function(){
        $("#application").append($("<div class='viewContainer'>ContentClass4</div>")[0])
    }, 1000)
})
</script>
</head>
<body>
    <div id="application"></div>
</body>
</html>

Answer 11

try this...

if($('.column-header')){  
//do something...
} 

or you can also do something like this..it will be more generic

jQuery.exists = function(selector) { return ($(selector).length > 0); }

if ($(selector).exists()) {
  // Do something
}