Tracking changes in the DOM

by Génesis García Morilla

HTML

<button>Add DOM element</button> Open console to see mutations

CSS

body {
  font-family: roboto;
  color: #555;
  display: grid;
  text-align: center;
}

button {
  cursor: pointer;
  border-radius: 5px;
  padding: 10px 30px;
  margin: 10px auto;
  color: #39464e;
}

p {
  font-size: 10vh;
  margin: 5px;
}

JavaScript

const mutationObserver = new MutationObserver(mutations => 
  mutations.forEach(mutation => console.log(mutation)))

mutationObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true
})

document.querySelector('button').onclick = () =>
  document.body.insertAdjacentHTML('beforeEnd', '<p>😸</p>')