How to trigger a JS function when the content of a page changes

Question

I'm writing a script to be triggered every time the page loads more content, or as I understand, child nodes are added to the html of the page. I used to mutation observer to observe the div named main in the page. The idea is when scrolled to the bottom, the page will load new content, hence trigger my function. But somehow my function doesn't seem to work. Can anyone help me fix this? The website I'm trying to manipulate is the 9GAG website. Here's my code:

function adbut(){
console.log("hd");}

const observerOptions = {
  childList: true,

};

    const mainid = document.querySelector("#main");
    const observer = new MutationObserver(adbut);
observer.observe(mainid, observerOptions);

There's an answered question about observing a DOM that doesn't exist yet. It's different from what I'm trying to do because I'm trying to observe an existing div with the id main. The element exists and the code above return no error but somehow the function isn't triggered when more content is loaded. That answered question is located here: observe node that doesn't exist yet