在div更改时执行JavaScript

Question

我有两个脚本。一个问我的后端关于数据库中的新数据，如果有新的东西，将其添加到div与id 'box'。在第二个脚本中，我想监控这个，如果在这个div中有什么改变，我想调用我的函数。怎么做呢?

$(document).ready(function(){
refreshTable();
});
function refreshTable(){ //loading data to div
$('#messbox').load('getData.php', function(){ setTimeout(refreshTable, 1000); });
}
function scroll(){ //function to call
$("#messbox").scrollTop($("#messbox")[0].scrollHeight);
}

Answer 1

您可以使用MutationObserver来侦听元素的childList中的变化:

const targetNode = document.getElementById('target');
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
myFunction()
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, {childList: true});
function myFunction(){
console.log("Change!")
}

<div id="target"></div>
<button onclick="target.innerHTML += '<p>Hello World!</p>'">Add something to #target</button>