Add an element when "DOMNodeInserted" event called

Question

I want to add an element after every "like" button (chrome extension). Since posts are added to the news feed without refreshing the page, I have to add an event listener "`DOMNodeInserted`". But when I try to put the `after()` function inside it, it doesn't work. Code: ``` $("#contentArea").addEventListener("DOMNodeInserted", function(event) { $(".like_link").after(' · '); $(".taheles_saving_message").hide(); }); ``` When I change `$("#contentArea")` to `document` it crashes all the page.

Accepted Answer

if you want to add an event listener in jQuery, that is not the method, the corect way should always be:

```
$(document or window).bind( your_event_name, function(event) { your_callback });
```

with this in mind, you can write:

```
$(document).bind('DOMNodeInserted', function(event) {

alert('inserted ' + event.target.nodeName + // new node
          ' in ' + event.relatedNode.nodeName); // parent

});
```

or do what you need to perform every time a node is inserted in the DOM.

for your information, if you want to use `addEventListener` you need to use plain javascript and not jQuery.

```
document.addEventListener("DOMNodeInserted", function () {
    // your code
}, false);
```

Edit: As on jQuery 1.7, please use the '.on' function instead: http://api.jquery.com/on/

another error that comes up of your method (if it worked) is that you will break your application as you are inserting a node and call the `DOMNodeInserted` (cause you have inserted a node) and that will insert the node again, and call the `DOMNodeInserted` again...

you can see what is going on ...

I would suggest that you listen to the correct method and append your `span` there...

Add an element when "DOMNodeInserted" event called

Solution

Problem