Detect div > ul has been changed

Question

I have some test code.

 <div class="someclass" id="someid">
    <div class="form-someclass1 class2 ">
    <div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div>
   </div>
    <ul class="ui-sortable">
           <!-- dynamically li gets added. -->
    </ul>
  </div>

As soon as we click on "btnId" li gets added in ul and div has been changed. Similarly, if we remove li ul gets changed and div has been changed. Is there any way to get information that div > ul has been changed and on which event should we trigger the code in order to know change? I tried for DOMSubTreeNodeChanged mutator events but as per google, it has compatibility issues and not to use.

Answer 1

How about this:

 $("#btnId").on('click', function(e){ //alert(1112); var target = $(this).closest(".someclass").find(".ui-sortable"); target.append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'); }); $(document).on('DOMNodeInserted', function(e) { //check if li inserted to ul if(e.target.localName == "li"){ //do somethings! console.log("Inserted a li for ul!"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="someclass" id="someid"> <div class="form-someclass1 class2 "> <div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div> </div> <ul class="ui-sortable"> <!-- dynamically li gets added. --> </ul> </div>