How to detect change in a div or body?

Question

I have a following script, I need to detect:

content element has change (size/position for example) or
body element has change (size/position for example)

I cannot this logic on the button itself.

What are the event available? Could you please provide a sample of code?

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script>
        window.App = {
            start: function () {
                var btn = document.getElementById('addContent');
                btn.addEventListener('click', function () {
                    var body = document.getElementsByTagName('body')[0];
                    body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
                });

                //---
                // does not work i need the content
                window.addEventListener('resize', function () {
                    console.log('content / window / resize');
                });

                var content = document.getElementById('content');
                content.addEventListener('change', function () {
                    console.log('content / div / resize');
                }.bind(this));
            }
        };
    </script>
</head>


<body onload="App.start();">
    <div id="content">
        <button id="addContent" type="button">Add content!</button>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</body>

</html>

Change event does not work on div/body elements. It will work only for form elements. — Alok Ranjan, Jan 08 '15 at 09:08
Can I ask what would be causing the change in body? Js? At which point, you could trigger the script you're trying to cast to change()? — Jack hardcastle, Jan 08 '15 at 09:11
yes from js, but basically I would like centralize this behavior as I have dozen of components which could make the change in body. — GibboK, Jan 08 '15 at 09:15

score 11 · Accepted Answer · edited May 23 '17 at 12:34

11

MutationObserver provides a way to react to any changes in a DOM.

Read more at MDN or MSDN

and also this thread enter link description here

edited May 23 '17 at 12:34

Community

1
1

answered Jan 08 '15 at 09:15

Alexander Dayan

2,846
1
17
30

This is definitely the most complete and most efficient way to achieve your goal. The options of the MutationObserver are very broad. You can tune the events it has to react on very well. – PaulR Jan 08 '15 at 15:38
1

After a while of searching for a function that could manage to catch react state updates, this managed to do the trick, tested on Firefox 73.0b11 Chrome 79 and IE 9 – Manuel Pirez Jan 31 '20 at 14:32

score 2 · Answer 2 · answered Jan 08 '15 at 09:31

Just another suggestion (not sure if it's going to fit your requirements), you can create a custom event and trigger it whenever you want:

window.App = {
    start: function () {
        var customEvent = new Event("customEvent"), // your custom event
            content = document.getElementById('content'),
            btn = document.getElementById('addContent');
        
        btn.addEventListener('click', function () {
            var body = document.getElementsByTagName('body')[0];
            body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';

            // trigger it
            content.dispatchEvent(customEvent);
        });
        
        content.addEventListener('customEvent', function () {
            console.log('content / div / resize');
        });
    }
};
App.start();

<div id="content">
    <button id="addContent" type="button">Add content!</button>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

Check this link

And instead of 'change' use 'DOMNodeInserted' and change html of div with ID content instead of innerHTML of body

You can see content / div / resize in your browser console

edited May 23 '17 at 12:34

Community

1
1

answered Jan 08 '15 at 09:18

Abhi

4,123
6
45
77

How to detect change in a div or body?

3 Answers3