I made this fiddle that listens for a few different MutationEvents, specifically DOMCharacterDataModified, DOMSubtreeModified, and DOMNodeInserted when changing the innerHTML of a div.

/

Interestingly, Chrome shows: DOMCharacterDataModified, DOMSubtreeModified

while Firefox 5 shows: DOMNodeInserted.

I'm not actually sure who's correct. I found this old Mozilla bug: .cgi?id=368133 and the W3 docs (.html), but I don't find either particularly enlightening.

Does anyone know what the proper behavior is? I'd love to file a bug on someone so it's consistent.

I made this fiddle that listens for a few different MutationEvents, specifically DOMCharacterDataModified, DOMSubtreeModified, and DOMNodeInserted when changing the innerHTML of a div.

http://jsfiddle/newtang/kysTm/15/

Interestingly, Chrome shows: DOMCharacterDataModified, DOMSubtreeModified

while Firefox 5 shows: DOMNodeInserted.

I'm not actually sure who's correct. I found this old Mozilla bug: https://bugzilla.mozilla/show_bug.cgi?id=368133 and the W3 docs (http://www.w3/TR/DOM-Level-2-Events/events.html), but I don't find either particularly enlightening.

Does anyone know what the proper behavior is? I'd love to file a bug on someone so it's consistent.

• javascript
• google-chrome
• firefox
• dom-events

Share Improve this question Follow edited Mar 27, 2022 at 22:34 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 29, 2011 at 23:43 NewtangNewtang 6,5541111 gold badges5353 silver badges7272 bronze badges 2

• I filed this Chromium bug based on the answers: code.google./p/chromium/issues/detail?id=88195 – Newtang Commented Jul 1, 2011 at 17:20
• Opened a Webkit bug: bugs.webkit/show_bug.cgi?id=93787 – Newtang Commented Aug 12, 2012 at 21:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

WebKit has an "optimization" where if you set innerHTML to something that contains no markup and the first child of the node you're setting it on is a Text node they will modify the text in the textnode directly instead of doing what the spec calls for (removing all the children and creating a new Text child). Hence the difference in mutation events.

Firefox's behaviour seems to be correct. You setting the innerHTML, so you do not change the characterData of an existing textNode, you insert a new textNode and remove any existing contents .(You may also observe DOMNodeRemoved in your example, you'll see that it fires too)

See the difference when really modifying the data of a textNode: http://jsfiddle/doktormolle/yQu8v/