DOMNodeInserted equivalent in IE?

Question

Besides using a timer to count the number of items over time and look for changes, I can't think of a better way to model this event.

Is there any proprietary version of IE DOMNodeInserted? Thank.

Answer 1

No no. The closest is the propertychange event, which fires in response to a change in the attribute or property of the CSS element. It fires in response to changing the property innerHTML element directly, but not when the contents of the elements are changed in some other ways (for example, using DOM methods such as appendChild() or by changing the innerHTML child element).

UPDATE February 6, 2014

As noted in the comments, there is a workaround. This is based on a sophisticated hack, and I would recommend using mutation observers where possible. See @naugtur answer for details . @Naugtur's answer has been removed, but the solution can be found at https://github.com/naugtur/insertionQuery

Answer 2

You can use all the DOM manipulation methods - appendChild, insertBefore, replaceChild, insertAdjacentHTML, etc. - and control innerHTML using onpropertychange.

You may be able to find a solution that meets your requirements.

By the way, it seems like DOMNodeInserted etc. In the future they will become obsolete by browsers. See http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents

Answer 3

onreadystatechange will work in IE. DHTML behavior must be attached to the element via htc, but the htc file must not 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 link

Answer 4

A dirty workaround is to hook prototype methods like Element like this:

 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 5

The use of onreadystatechange suggested by Paul Sweatte does not really work. The readystatechange event is fired only when foo.htc is loaded. This has nothing to do with modifying the DOM node.

I showed a little violin to demonstrate this. Take 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 if there is no DOM manipulation, the readystatechange event occurs.

Answer 6

It looks like DHTML behavior can be used in IE to emulate DOMNodeInserted .