<ul id="target">
  <li>Simone</li>
  <li>Zelig880</li>
  <li>John</li>
</ul>
<button>Add random entry</button>
<div>The list height is: <span id="height"></span></div>

document.querySelector( 'button' ).addEventListener("click", addRow);
function addRow() {
  const newRow = document.createElement( 'li' );
  newRow.innerText = 'RandomName' + Math.random();
  document.querySelector( 'ul' ).append( newRow );
};

const targetNode = document.getElementById( 'target' );

const config = {
  attributes: false,
  childList: true,
  subtree: false
};

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {   
    if ( mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0 ) {
      const height = mutation.target.getBoundingClientRect().height;
      document.getElementById( 'height' ).innerText = height;
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);