<header>Match media test</header>

(function (d) {
  "use strict";
  const mqls = window.matchMedia("(max-width: 850px)");
  const header = d.querySelector("header");
  const headerContact = `
  <div id='phoneNumberBox' class='contactInfo'> 
      Call me: <a href='tel:+1 xxx-xxxxxx'>+1 012-3456780</a>
  </div>`;

  function mediaqueryresponse(mqls) {
    if (mqls.matches) {
      // {max-width: 850px} query matched
      var contactInfo = header.querySelector("#phoneNumberBox");
      if (contactInfo !== null) contactInfo.remove();
    } else {
      header.insertAdjacentHTML("beforeend", headerContact);
    }
  }
  // call listener function explicitly at run time
  mediaqueryresponse(mqls);
  // attach listener function to listen in on state changes
  mqls.addEventListener("change", mediaqueryresponse);
})(document);