DOMNodeInserted equivalent in IE?

Question

Other than using a timer to count the number of elements over time and looking for changes, I can't think of a better way to simulate this event.

Is there some sort of proprietary IE version of DOMNodeInserted? Thanks.

Answer 1

Using onreadystatechange as suggested by Paul Sweatte does not really work. The readystatechange event is only triggered while loading foo.htc. It has nothing to do with changing the DOM node.

I've set up a little fiddle to demonstrate it. Have a look at http://jsfiddle.net/Kermit_the_frog/FGTDv/ or http://jsfiddle.net/Kermit_the_frog/FGTDv/embedded/result/.

HTML:

<input type="button" id="fooBtn" value="add" />
<div id="fooDiv"></div>

JS/Jquery:

function bar(e) {
    var state = $('#fooDiv').get(0).readyState;
    alert (state);
}

$("#fooBtn").on("click", function(){
    $('#fooDiv').get(0).addBehavior("foo.htc");
    $('#fooDiv').get(0).attachEvent("onreadystatechange", bar);
});

As you can see: even though there is no DOM manipulation going on there is a readystatechange event.

Answer 2

A dirty workaround is to intercept the prototype methods of type Element as follows:

window.attachEvent('onload', function() {
    invokeNodeInserted(document);
    (function(replace) {
        Element.prototype.appendChild = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.appendChild);
    (function(replace) {
        Element.prototype.insertBefore = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.insertBefore);
    (function(replace) {
        Element.prototype.replaceChild = function(newElement, element) {
            invokeNodeInserted(newElement);
            return replace.apply(this, [newElement, element]);
        };
    })(Element.prototype.replaceChild);
});

Answer 3

onreadystatechange will work in IE. A DHTML behavior must be attached to the element via htc, but the htc file does not have to exist:

if (!!document.addEventListener)
  {
  $(domnode).get(0).addEventListener("DOMNodeInserted", fixtext, false);
  }
else
  {
  $(domnode).get(0).addBehavior("foo.htc");
  $(domnode).get(0).attachEvent("onreadystatechange", fixtext);
  }

onreadystatechange event reference

Answer 4

You can over-ride all the DOM-manipulation methods - appendChild, insertBefore, replaceChild, insertAdjacentHTML, etc - and monitor innerHTML with onpropertychange.

You might be able to come up with a solution that satisfies your requirements.

BTW, it seems that DOMNodeInserted, etc will be deprecated by browsers in the future. See http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Answer 5

Seems, DHTML Behaviors can be used in IE to emulative DOMNodeInserted.

Answer 6

No, there isn't. The nearest is the propertychange event, which fires in response to a change in an attribute or CSS property of an element. It fires in response to changing the innerHTML property of an element directly but not when the contents of the elements are altered by some other means (e.g. by using DOM methods such as appendChild() or by altering the innerHTML of a child element).

UPDATE 6 February 2014

As pointed out in the comments, there is a workaround. It's based on an elaborate hack and I'd recommend using mutation observers instead wherever possible. See @naugtur's answer for details. @naugtur's answer has been deleted but the solution can be found at https://github.com/naugtur/insertionQuery