Sai Sai - 1 year ago 135
Javascript Question

what is the difference between DOMNodeInserted and DOMNodeInsertedIntoDocument?

According to the DOM events in wiki found in the wiki link here,

DOMNodeInserted: Fires when a node has been added as a child of another node

DOMNodeInsertedIntoDocument: Fires when a node is being inserted into a document

Now what is the real difference? Shouldn't both events be the same? If not when and where should be used?

The scenario where I am using the above mentioned DOM events is that, I have a set of pages and each page loads a nav.jsp file inside a div reserved for navigation. Now I want to highlight the current page's nav tab hence I give it a small background property after that DOM element ( nav DIV) is loaded.

Now for my problem

$(document).on('DOMNodeInserted', function(e) {

worked, but just curious what is the difference is between the two events specified in my question.

Answer Source

The DOMNodeInsertedIntoDocument event is similar to the DOMNodeInserted event, but it occurs when a node is inserted into the document.

For example, if a node is added to an element that is not a part of the document, the DOMNodeInserted event is fired but the DOMNodeInsertedIntoDocument event is not. If the parent element of a node is inserted into the document, the DOMNodeInsertedIntoDocument event is fired but the DOMNodeInserted event is not.

See JSFiddle:

Try removing the container when text node is still there and inserting it back in to see the different events triggered.