19

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.

6 Answers 6

7

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

11
  • javascript:var div = document.createElement("div"); div.onpropertychange = function() { var e = window.event; alert(e.propertyName + ": " + this[e.propertyName]); }; document.body.appendChild(div); div.innerHTML = "Hello"; void(0);
    – Sean Hogan
    Commented Sep 21, 2011 at 1:19
  • @Sean: OK, I wasn't clear. What I meant was that propertychange does not fire for innerHTML when the content of an element changes by any means other than setting its innerHTML property directly, which makes it pretty much useless as a workaround for DOMNodeInserted: jsfiddle.net/eze5V/8. I've updated my answer.
    – Tim Down
    Commented Sep 21, 2011 at 8:22
  • See my answer. It is possible to simulate this event and it has been done, although it is probably more effort than it is worth.
    – Sean Hogan
    Commented Sep 21, 2011 at 9:41
  • @Sean: I saw it. Overriding all DOM methods and properties that could change the DOM is simply not possible, so that's a non-starter as a general solution.
    – Tim Down
    Commented Sep 21, 2011 at 10:01
  • There is a solution for IE10+ stackoverflow.com/questions/2143929/…
    – naugtur
    Commented Feb 6, 2014 at 10:41
6

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

5
  • just curious, where did you see the deprecation part about DOMNodeInserted?
    – Anurag
    Commented Apr 14, 2010 at 14:50
  • 3
    @Anurag Note: The MutationEvent interface was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across user agents. In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge. A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner. Thus, this specification describes mutation events for completeness, but deprecates the use of both the MutationEvent interface and the MutationNameEvent interface. Commented May 21, 2010 at 14:38
  • 2
    Any idea what that new specification might be, or where it's implemented? Commented Mar 9, 2011 at 15:58
  • "monitor innerHTML with onpropetrychange." - I don't understand. onproperychange will not fire if innerHTML is changed (msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx)
    – ripper234
    Commented Sep 19, 2011 at 11:25
  • @ripper234: From the page you referenced: "Changing the innerText or innerHTML of child elements will not cause the onpropertychange event to fire for the parent element. "
    – Sean Hogan
    Commented Sep 21, 2011 at 1:07
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

1

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);
});
0

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.

-2

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

2
  • 6
    Can you elaborate on that?
    – naugtur
    Commented Jul 11, 2011 at 6:41
  • You didn't said much. If you do have a solution, please provide it here. There is no place here for false statements. Commented Feb 16, 2015 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.