attribue observer and move children

start observation for target
target observe input and attribute change (function obs)
actions on target
moveChi to move the childern between the two lists
change display for outUl1 and outUl2

outUl1 output 1

outUl2 output 2

Source /home/ch45859/web/wlkl.ch/public_html/inf/js/j13observer.php 

<html>
 <head>
  <title> <?php echo basename(__file__, '.php'); ?> </title>
    <style type="text/css">
         #layer {position:absolute; top:12em; left: 12em; width: 340; height:246; border: 1em solid red; padding-left: 2em; 
            background-image: url("pn.jpg"); background-repeat:  no-repeat; background-color: yellow; }
    </style>
    <script type="text/javascript">
    var cc = 0;
        function out(msg) {
            var pa = document.getElementById("outUl1");
            var nd = document.createElement('li');
            nd.innerHTML = ++cc + ". " + msg;
            pa.prepend(nd);
        }
        function obs(mutationsList, observer) {
            for(var mutation of mutationsList) {
                if (mutation.type == 'attributes') {
                    var t = mutation.attributeName + ' attribute was modified for id=' + mutation.target.id
                            + ", chk " + mutation.target.checked
                            + ", disp=" + mutation.target.style.display + ', css=' + mutation.target.style.cssText;
                   /* for (var v in mutation) 
                        t = t +  ', ' + v + '=' + mutation[v];  */
                    out(t);
                } else {
                    out("obs " + mutation.attributeName);
                }
            }
        }
        function observe() {
            var ta = document.getElementById("target");
            out("observe target display " + ta.style.display);
            var config = { attributes: true }
            var observer = new MutationObserver(obs);
            observer.observe(ta, config);
            swapRegister('outUl1', 'outUl2');
        }

        function moveChi(frId, toId) {
            var fr = document.getElementById(frId);
            var to = document.getElementById(toId);
            while (fr.childNodes.length > 0) 
                to.appendChild(fr.childNodes[0]);
        }

        var swapList = [];
        function swap(mutationsList, observer) {
            for(var mut of mutationsList) {
                if (mut.type != 'attributes') {
                    out("obs " + mut.attributeName);
                } else {
                    var lst = swapList.find(l => l.find(e => e == mut.target));
                    out('swap ' + mut.attributeName + ' modified for id=' + mut.target.id
                            + ", disp=" + mut.target.style.display + ' found list ' + lst.toString() + ' => ' + lst.map(e => e.style.display).toString());
                    var to = lst.find(e => e.style.display != 'none');
                    if (to === undefined) {
                        out('no element with display');
                    } else {
                        for (var e of lst) { 
                            if (e === to) {
                                out(e.id + " is to " + e.style.display);
                            } else if (e.style.display != 'none' ) {
                                out(e.id + " is displayed " + e.style.display);
                            } else {
                                out(e.id + " is from " + e.style.display + ' to ' + to.id);
                                while (e.childNodes.length > 0) 
                                    to.appendChild(e.childNodes[0]);
                            }
                        }
                    }
                } 
            }
        }
        function swapRegister(...ids) {
            var els = ids.map(i => document.getElementById(i));
            swapList.push(els);
            out('reg ids ' + ids.toString() + " els " + els.toString() + ', dis ' + els.map(e => e.style.display == '' ? 'empty' : e.style.display).toString());
            var config = { attributes: true }
            els.forEach(e => { 
                (new MutationObserver(swap)).observe(e, config);
            });
        }
</script>
 </head>
<body>
<h1 >attribue observer and move children</h1>
<table>
<tr><td><input type="button" value="output" onclick='out("button clicked");'S />
<input type="button" value="observe" onclick="observe();" /> </td><td>start observation for target </td></tr>
<tr><td>
<input type="checkbox" value="target" id="target" onInput="out('target input '+ getElementById('target').checked);">target</input>
</td><td>observe input and attribute change (function obs)<td/></tr>
<tr><td><input type="button" value="hide" onclick='document.getElementById("target").hidden = true;' />
<input type="button" value="show" onclick='document.getElementById("target").hidden = false;' />
<input type="button" value="display none" onclick='document.getElementById("target").style.display = "none";' />
<input type="button" value="display inline" onclick='document.getElementById("target").style.display = "inline";' /></td>
<td>actions on target</td></tr>
<tr><td><input type="button" value="move 1 to 2" onclick='moveChi("outUl1","outUl2");' />
<input type="button" value="move 2 to 1" onclick='moveChi("outUl2","outUl1");' />
</td><td>moveChi to move the childern between the two lists</td></tr>
<tr><td><input type="button" value="1 noDisp" onclick='document.getElementById("outUl1").style.display = "none";' />
<input type="button" value="1 disp" onclick='document.getElementById("outUl1").style.display = "block";' />
<input type="button" value="2 noDisp" onclick='document.getElementById("outUl2").style.display = "none";' />
<input type="button" value="2 disp" onclick='document.getElementById("outUl2").style.display = "block";' />
</td><td>change display for outUl1 and outUl2</td></tr>
</table>
<h1>outUl1 output 1</h1>
<ul id=outUl1>
<li>outUl1 output list anfang</li>
</ul>

<h1>outUl2 output 2</h1>
<ul id=outUl2>
<li>outUl2 output list anfang</li>
</ul>

<h1 id="src">Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>