dmitry-vsl/index.html

## index.html
<script>

  function DOMAttachWatcher(){

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if([...mutation.addedNodes].includes(el) && onAttachCb){
          onAttachCb()
        }
        if([...mutation.removedNodes].includes(el) && onDetachCb){
          onDetachCb()
        }
      });
    });
    var config = {subtree: true, childList: true}

    window.addEventListener('load', () => {
      observer.observe(document.body, config);
    })

    // currently can watch just for one el
    var el, onAttachCb, onDetachCb

    function onAttach(_el, _cb){
      el = _el
      onAttachCb = _cb
    }

    function onDetach(_el, _cb){
      el = _el
      onDetachCb = _cb
    }

    return {onAttach, onDetach}
  }

  var {onAttach, onDetach} = DOMAttachWatcher()

  function ClockWidget(){

    var el = document.createElement('div')

    function showTime(){
      console.log('showTime')
      el.textContent = new Date().toLocaleTimeString()
    }

    var interval

    onAttach(el, () => {
      interval = setInterval(showTime, 1000)
    })

    onDetach(el, () => {
      clearInterval(interval)
    })

    return el
  }

  window.addEventListener('load', () => {

    setTimeout(() => {
      foo.appendChild(ClockWidget())
    }, 1000)

    setTimeout(() => {
      foo.removeChild(foo.children[0])
    }, 5000)

  })
</script>

<body>
   <div id='foo'></div>
</body>
	<script>

	function DOMAttachWatcher(){

	var observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
	if([...mutation.addedNodes].includes(el) && onAttachCb){
	onAttachCb()
	}
	if([...mutation.removedNodes].includes(el) && onDetachCb){
	onDetachCb()
	}
	});
	});
	var config = {subtree: true, childList: true}

	window.addEventListener('load', () => {
	observer.observe(document.body, config);
	})

	// currently can watch just for one el
	var el, onAttachCb, onDetachCb

	function onAttach(_el, _cb){
	el = _el
	onAttachCb = _cb
	}

	function onDetach(_el, _cb){
	el = _el
	onDetachCb = _cb
	}

	return {onAttach, onDetach}
	}

	var {onAttach, onDetach} = DOMAttachWatcher()

	function ClockWidget(){

	var el = document.createElement('div')

	function showTime(){
	console.log('showTime')
	el.textContent = new Date().toLocaleTimeString()
	}

	var interval

	onAttach(el, () => {
	interval = setInterval(showTime, 1000)
	})

	onDetach(el, () => {
	clearInterval(interval)
	})

	return el
	}

	window.addEventListener('load', () => {

	setTimeout(() => {
	foo.appendChild(ClockWidget())
	}, 1000)

	setTimeout(() => {
	foo.removeChild(foo.children[0])
	}, 5000)

	})
	</script>

	<body>
	<div id='foo'></div>
	</body>