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.

score 8 · Accepted Answer · edited Aug 31 '13 at 02:51

8

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

edited Aug 31 '13 at 02:51

khalid13

2,767
2
30
48

answered May 19 '12 at 18:46

balexandre

73,608
45
233
342

If I use the second method, what function should I use instead of after() in jQuery? – Nadav S. May 19 '12 at 18:51
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... – balexandre May 19 '12 at 19:03
yes you are right, do you have any suggestion? I already tried many things like setInterval()... – Nadav S. May 19 '12 at 19:20
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... – balexandre May 19 '12 at 19:23
Take a look [here](http://stackoverflow.com/questions/10674079/domnodeinserted-event-loop) – Nadav S. May 20 '12 at 14:06

score 0 · Answer 2 · answered Feb 23 '17 at 10:28

if you are facing problem that your code under runs only once in jquery .on() function then your should put it under addEventListner like below example //

document.addEventListener('DOMNodeInserted', function(e) {
    $("selector").on('DOMNodeInserted', function(e)   {
       //your code which you want to execute each time DOMNodeInserted
    });
});

Add an element when "DOMNodeInserted" event called

2 Answers2

Linked