检测div> ul已更改

Question

我有一些测试代码。

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

一旦我们点击“btnId”，我就会在ul中添加li并且div已被更改。同样，如果我们删除li ul会更改并且div已更改。有没有办法获取div> ul已被更改的信息，以及我们应该在哪个事件触发代码以了解更改？我试过DOMSubTreeNodeChanged mutator事件，但根据谷歌，它有兼容性问题，不能使用。

Answer 1

这个怎么样：

$("#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>