What is the difference between DOMNodeInserted and DOMNodeInsertedIntoDocument?

Question

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

DOMNodeInserted: fired when a node was added as a child of another node

DOMNodeInsertedIntoDocument: fired when a node is inserted into a document

Now what is the real difference? Shouldn't both events coincide? If not, when and where should I use it?

The scenario in which I use the aforementioned DOM events is that I have a set of pages and each page loads the nav.jsp file inside the div reserved for navigation. Now I want to highlight the current page navigation tab, so I give it a small background property after loading this DOM element (nav DIV).

Now for my problem

$(document).on('DOMNodeInserted', function(e) { if(e.target.id=="navigate"){ //........... } }); 

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

Answer 1

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

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

See JSFiddle: http://jsfiddle.net/ghyga4v6/2/

Try to remove the container when the node text is still there, and insert it back to view various events.

Answer 2

Here are two articles you can read about

• DOMNodeInsertedIntoDocument Event
• DOMNodeInserted Event

For example, you can insert a Node into a BOM element to develop a browser extension or manage history.

i.e. The specification consists of an object navigator, history, screen, location and document, which are children of the window. The node document contains the DOM, the document object model that represents the contents of the page. You can manipulate it with javascript. (From the wiki)

Here is a snippet that will help if you want to continue exploring.

 $(window).on('DOMNodeInsertedIntoDocument', function(){ console.log('DOMNodeInsertedIntoDocument occurred'); }); $(window).on('DOMNodeInserted', function(){ console.log('DOMNodeInserted occurred'); }); 

By the way, for your information only. MutationObserver replaces Mutation Events .

Answer 3

This is not the same, because the first should work when adding a new node to a node that is outside the document (created and not yet added or previously removed from its parent).