javascript - Listen for changes in DOM -

i working on reflection of part of website. relevant html:

<div id = "original">     <img src = "picture.png" alt = "a picture" id = "picture">     <p id = "text">some text</p> </div> <div id = "reflection"></div> 

my idea copying content of div#original div#reflection this:

<script>     function reflect()     {         var original = document.getelementbyid("original");         var reflection = document.getelementbyid("reflection");         reflection.innerhtml = original.innerhtml;     } </script> 

i aware, make html invalid, in whole project iterate through elements copied , set ids not have side effect. thought unnecessary include here.

the problem have html want reflect dynamic, may change. reflection wrong. have searched event handler this, haven't found one. 1 near found onchange, apparently listens changes in attributes, not child elements. there 1 this, or did use onchange wrong?

thank help!
gef

i aware add onchange every element, seemed not style me.

the simplest thing can add callback reflect() every time change contents of #original.

if not option, can mutationobserver (documetation), suggested here: is there javascript/jquery dom change listener?