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('<span class="dot"> · </span><button class="taheles_link stat_elem as_link" title="תגיד תכל&acute;ס" type="submit" name="taheles" onclick="apply_taheles()" data-ft="{&quot;tn&quot;:&quot;&gt;&quot;,&quot;type&quot;:22}"><span class="taheles_default_message">תכל&acute;ס</span><span class="taheles_saving_message">לא תכלס</span></button>');
        $(".taheles_saving_message").hide(); 
    });

When I change $("#contentArea") to document it crashes all the page.

Solution

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...

Comments

[Nadav S.]

If I use the second method, what function should I use instead of after() in jQuery?

[balexandre]

you can't insert a node inside your listener for DOMNodeInserted or you get an infinite loop... after you use the .after() to insert the new node, the DOMNodeInserted will be called again (as you have inserted a DOM node) and so on, and on, and on...

[Nadav S.]

yes you are right, do you have any suggestion? I already tried many things like setInterval()...

[balexandre]

suggest of what? you do not say what you want to do ... and if I'm write, you should upvote ;) - maybe you can ask something different in a new question no? And then leave the url of your new question here, so I can have a look what are you trying to do...

[Nadav S.]

Take a look here