Domnodeinserted Behaves Weird When Performing Dom Manipulation On Body

The following code uses DOMNodeInserted to perform DOM manipulation on the body element once it is inserted into the DOM. I know $(document).ready(function { }); is enough to do t

Solution 1:

jQuery starts some tests when it has been loaded (line 1537 in the un-minified version)

// Run tests that need a body at doc readyjQuery(function() {
var container, outer, inner, table, td, offsetSupport,
...

For this it adds a div element with some stylings. That is your mysterious element you've found.

Because of your event handler, this element gets wrapped within another div. At line 1654 jQuery wants to remove their test element with

body.removeChild( container );

which failes because the container isn't a child element of body anymore.

Edit In your example you're not adding an element to the DOM so the event can't fire ;)

window.onload = function() {
    document.body.appendChild(document.createElement("div"));  // will fire DOMNodeInserted
}

Why it "works" with jQuery? Because jQuery adds an element to the DOM (the mysterious test element) :)