How to detect DOM nodes insertion?

Question

I need to detect DOM changes (especially when adding DOM elements).
So that a method may be called in Chrome, Firefox, IE9+

Let's assume we have a button to add li dynamically as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<input id="btn" type="submit" value="Add Item"> 
<ul/>
<script type="text/javascript">
    $("#btn").click(function(){
        $("<li />").html("item").appendTo("ul");
    })
</script>

I need something like that to detect li additions for example:

onDomChange(function(){ 
    alert("DOM changed !");
});

I've implemented this solution: http://jsfiddle.net/Lcybj/
but it only works on Chrome.

How to achieve a solution to work on 3 browsers ?

I've found many solutions, for example: http://jsfiddle.net/Lcybj/ . This only works for one or two browsers. — Ashraf Bashir, Mar 25 '13 at 11:45

score 1 · Answer 1 · answered Mar 25 '13 at 11:11

1

There are some events, but i don't think they are supported by all browsers. Take a look a this (Row Mutation): WIKI DOM EVENTS

answered Mar 25 '13 at 11:11

Rob

4,927
12
49
54

How to detect DOM nodes insertion?

1 Answers1