JavaScript 在 div 改变时做一些事情

Question

I have two scripts. One asks my backend about new data in database and if there is something new, add this to div with id 'box'. In second script I want to monitorize this and if something is changed in this div, I want to call my function. How to do that?

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

You can use a MutationObserver to listen for changes in the element's 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>