jQuery: How can I detect if the html has changed within a given element?

Question

In javascript, possibly using jQuery, how can I detect if the html content of a given element has changed?

I'd like to be able to do somthing like:

$('#myDiv').change(function(){
  // do some stuff
});

I am basically trying to detect if given elements are being added to the div or if the inner html of given elements (such as labels) has changed and then hide or show the div depending on the content.

Any alternative idea about how to achieve smt like this is also appreciated.

I am hoping I won't have to revert to some obscure plugin to do this!

NOTE: this needs to work at least in IE8!

Lewis · Accepted Answer · 2021-08-24 21:10:41Z

22

You can use the DOM Level 3 event DOMNodeInserted. Example:

$('#myDiv').bind('DOMNodeInserted', function(e) {
    console.log('element: ', e.target, ' was inserted');
});

Demo: http://www.jsfiddle.net/vsgdZ/1/

The event will fire whenever a new node was appended to the element on which you bind the handler.

edited Aug 24, 2021 at 21:10

Lewis

3,4253 gold badges32 silver badges26 bronze badges

answered Feb 9, 2011 at 20:49

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jan Over a year ago

Or what about DOMSubtreeModified event? (Only supported by Chrome, Firefox and Safari)

jAndy Over a year ago

@Jan: If I understand OPs requirement correctly (detecting new nodes) this event will do just fine.

Jan Over a year ago

and would this event fire if the className of one of the children is changed? That is also 'changing of content'. I'm not saying your solution is wrong, just suggesting another event that might help if he needs more than detecting insertion of new children.

jAndy Over a year ago

@Jan: read the question again. I am basically trying to detect if given elements are being added to the div.

Jan Over a year ago

Oops, my bad. (Any alternative idea about how to achieve smt like this is also appreciated.)

|

Collectives™ on Stack Overflow

jQuery: How can I detect if the html has changed within a given element?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related