Fire up event when element is inserted to html OL

Question

I have a list ol in HTML where I dynamically add new elements after user action.

Is it possible to register a method which will be called after new li has been added to list??

@Iwrestledabearonce. but thats not what I was asking for as with more complex scenario this creates extra logic and more coupling :) — Tomasz Mularczyk, Nov 08 '16 at 20:29
Sort of like a callback. You can just use a callback. see my answer. — I wrestled a bear once., Nov 08 '16 at 20:38

score 3 · Accepted Answer · edited May 23 '17 at 10:32

Mutation Observers

Other similar answer: Detect changes in the DOM

The following works in Chrome 18+, Firefox 14+, IE 11+, Opera 15+, and Safari 6+ and is documented here.

function add() {
  document.getElementById("list").innerHTML += "<li>added</li>";
}

// Where listening for new <li>s happens
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    document.getElementById("output").innerHTML += "Doing something on DOM change.\n";
  });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe(document.getElementById("list"), config);

<pre id="output"></pre>
<ol id="list">
  <li>First!</li>
  <li>Second.</li>
  <li>Third...</li>
  <li>fourth......</li>
  <li>fifth :(</li>
</ol>
<button onclick="add()">Add</button>

this is exactly what I was looking for. Not sure if browser support isn't a problem tho. — Tomasz Mularczyk, Nov 08 '16 at 20:52

score 1 · Answer 2 · answered Nov 08 '16 at 20:38

Use a conditional callback.

function addJunk(junkToAdd, callback){
    $("#myList").append("<li>"+junkToAdd+"</li>");
    if("function"===typeof callback) callback();
}

addJunk("junk");
addJunk("stuff");

// but this time i wanna do stuff afterwords
addJunk("things", function(){
    alert("just did some stuff");
});
  
addJunk("items");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id='myList'></ol>

Alternatively, you can look into promises.

function addJunk(junkToAdd){
    return new Promise(function(callback){
        $("#myList").append("<li>"+junkToAdd+"</li>");
        callback();
    });
}

addJunk("junk");
addJunk("stuff");

// but this time i wanna do stuff afterwords
addJunk("things").then(function(){
    alert("just did some stuff");
});
  
addJunk("items");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id='myList'></ol>

score 0 · Answer 3 · answered Nov 08 '16 at 20:47

In this events reference, I've found there was a DOMNodeInserted event, but it got deprecated. Looks like they're recommending to use Mutation Observers now - there're some examples here, but I've never tried it. Pay attention to the browser compatibility too.

Think twice if you're not overthinking something which is not really need, it could simply just call a function whenever you'd like.

Fire up event when element is inserted to html OL

3 Answers3