[javascript] Lägga till en meny inuti flera element som kanske inte alltid existerar i DOM

<ytd-page-manager>
  <ytd-browse page-subtype="home">

function oldAppbar() {
  // All nav items
  const navItems = [
    {href: '/', text: chrome.i18n.getMessage('c_home')},
    {href: '/feed/trending', text: chrome.i18n.getMessage('c_trending')},
  ];

  let navElem = document.createElement("div"),
    navList = document.createElement("ul"), 
    navItem, navLink;

  // Cycle over each nav item
  for (let i = 0; i < navItems.length; i++) {
    // Create a fresh list item, and anchor
    navItem = document.createElement("li");
    navLink = document.createElement("a");
    // Set properties on anchor
    navLink.href = navItems[i].href;
    navLink.innerHTML = navItems[i].text;
    // add class to li
    navItem.className = "ytcp-nav-item";
    // Add anchor to list item, and list item to list
    navItem.appendChild(navLink);
    navList.appendChild(navItem);
  }
  // add elements
  const grid = document.querySelector('ytd-browse');
  grid.appendChild(navElem).appendChild(navList);
}

  let element = document.querySelector('ytd-browse'), role = false;
  const observer = new MutationObserver(function (mutations) {
    const grid = document.querySelector('ytd-browse[role="main"]');
    grid.appendChild(navElem).appendChild(navList);
  });
  observer.observe(element, { attributes: true, subtree: role });