How to Be Notified When an Element Is Added to the Page

How can I be notified when an element is added to the page?

Warning!

This answer is now outdated. DOM Level 4 introduced MutationObserver, providing an effective replacement for the deprecated mutation events. See this answer to another question for a better solution than the one presented here. Seriously. Don't poll the DOM every 100 milliseconds; it will waste CPU power and your users will hate you.

Since mutation events were deprecated in 2012, and you have no control over the inserted elements because they are added by someone else's code, your only option is to continuously check for them.

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}

Once this function is called, it will run every 100 milliseconds, which is 1/10 (one tenth) of a second. Unless you need real-time element observation, it should be enough.

Get notification when DOM-Element is added

You could use the event DOMSubtreeModified. Assign this event to the parent of your lis and check if the event gets fired if there is a new li. In this case you assign a new handler to that li.

$("#li_parent").bind("DOMSubtreeModified", function() {
    alert("possibly a li has been inserted");
    // do your magic here
});

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

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

How to detect element being added/removed from dom element?

Use Mutation Observers as suggested by @Qantas in his answer

---

Following methods are deprecated

You can use DOMNodeInserted and DOMNodeRemoved

$("#parent").on('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

$("#parent").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' was removed');
});

MDN Docs

Detect newly inserted element in the document

Here is a thought:

var cnt=0;

var f = Element.prototype.appendChild;
Element.prototype.appendChild = function(){
   f.apply(this, arguments);
   console.log("added",++cnt) 
};

However you will need to see if it is the same element that is added and I have not figured out how to check the remove since that is parentNode.removeChild

If you want events on all selects in jQuery all you have to do is delegate

$(document).on("change","select",function() { 
  // all current and future selects will have this event
});

notifyJS: Element notifications do not stack

Okay, for clarification: The notifications do not stack, because it is not intented to do so if you place them next to an element. If you think about it, it is obvious that most people don't want that. Thus why it just replaces the last notification on that specific element.

Yet the gap attribute still does not work. So I just added custom css styles in my style.css which modifies the behavior of the notifiations.

I positioned the notifications bottom left and then added these styles to my css file:

.notifyjs-corner {
    width: 99% !important;
    margin: 17px !important;
}

.notifyjs-bootstrap-base {
    text-align: center !important;
}

By increasing the margin of the notifyjs-corner the notification is now placed on top of my (fixed-size) footer. Also, by adding the width of 99%, its nearly full-size over the width of my page. Lastly, I added the text-align to have the notification text centered.

How to do an action when an element is added to a page using Jquery?

The short, direct answer to your question would be "no can do." But from your comment a few minutes ago, I see that you want to add elements in different ways and have one unified method of handling these newly added items. May I suggest another approach? Trigger custom events.

The way it would work is like this: everywhere you load the error-message element, you add one line when it's done:

 $('.error_message').trigger('load');

Now your .live('load'...) thing will work.

Notification placement on website with notify.js

I've played a bit with the example on http://notifyjs.com. All global notifications are added to a container <div> with class .notifyjs-corner. Looking through the source code it seems that there is not option to override the default css styling on this class. The container gets its positioning set by adding inline styling to the html element. One way to override this would be for example:

.notifyjs-corner {
    top: 70px !important;
}

Another, I think preferable, solution would be to not use global notifications, but to create your own positioning element. For example create an element like <div class="notifications">, position it using your own css and add notifications to it using $('.notifications').notify('successfully logged in', 'success');

How to detect new element creation in jQuery?

You can use the .livequery() plugin for this, it runs for each element, including new ones, like this:

$("a").livequery(getLinkCount);

However, this plugin is out-of-date and is not recommended for current versions of jQuery.

It's usually easier to do this when you create the elements though, for example if you're doing it after AJAX requests, the .ajaxComplete() handler may be a good place, for example:

$(document).ajaxComplete(getLinkCount);

This would run after each request, and since you normally create elements in your success handler, they would already be present when this complete handler runs.

---

Related Topics