Question

我在HTML中有一个列表ol，我在用户操作后动态添加新元素。

是否可以注册一个方法，该方法将在将新li添加到列表后调用？

Answer 1

突变观察员

以下适用于Chrome 18 +，Firefox 14 +，IE 11 +，Opera 15+和Safari 6+，并记录在案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>

Answer 2

使用条件回调。

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>

或者，您可以查看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>

Answer 3

在这个events reference中，我发现有一个DOMNodeInserted event，但它已被弃用。看起来他们现在建议使用Mutation Observers - some examples here，但我从未尝试过。{3}}请注意browser compatibility。

如果你没有过度思考不需要的东西，请三思而后行，它可以随时调用一个函数。

将元素插入html OL时触发事件

3 个答案: