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) { 
      if(e.target.id=="navigate"){
      //...........
      }
 });

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

Answer

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: http://jsfiddle.net/ghyga4v6/2/

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