问拦截DOM更改

EN

<div id="holder">
  <h2>Let's Add Div's Dynamically</h2>
</div>

<button id="button" type="button">Add New Div</button>

<script>
    const btn = $('#button');
    const holder = $('#holder');

    // append a new div to out holder element
    function addDiv(){
        holder.append('<div>A Great New Div!! :D</div>'); 
    }

    // attach click function to btn
    btn.click(addDiv);



    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(function(mutationsList, observer) {
        $(mutationsList).each(function(index, item){
            if (item.type === 'childList'){

                if (item.addedNodes.length > 0){
                    alert('new div is being added!');
                }

                if (item.removedNodes.length > 0){
                    alert('div has been removed'); 
                }

            }
        });
    });

    // Start observing the target node for configured mutations
    observer.observe(holder[0], { 
        attributes: true, 
        childList: true, 
        subtree: true 
    });
</script>