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);
}
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>