Mutation Observer Badge - JavaScript Client

MutationObserver watches a list for child changes and updates a badge count when a new item is appended.

Program

MutationObserver lets JavaScript react when DOM nodes are added, removed, or changed by another part of the page.

mutation_observer_badge.html

<span id="count">2 items</span><ul id="queue"><li>Build</li><li>Test</li></ul>
<script>
  const countEl = document.querySelector("#count");
  const queueEl = document.querySelector("#queue");
  const observer = new MutationObserver(() => {
    countEl.textContent = queueEl.children.length + " items";
  });
  observer.observe(queueEl, { childList: true });
  queueEl.append(document.createElement("li"));
  queueEl.lastElementChild.textContent = "Deploy";
</script>

MutationObserver MutationObserver watches DOM mutations such as added or removed child nodes.

childList The childList option observes direct child additions and removals.