Add copy to clipboard button to all preformat code in pure Javascript

document.onreadystatechange = function () {
  if (document.readyState == 'complete') {

    // for all pre > code
    document.querySelectorAll('pre > code').forEach(function (codeBlock) {

      // create anchor element
      let copy = document.createElement('a');
      copy.className = 'btn-copy';
      copy.innerText = 'Copy';
      copy.title = 'Copy to Clipboard!';
      copy.href = '#';

      // add click event
      copy.addEventListener('click', function (e) {
        copy.innerText = 'Copied!';

        // copy innerText of preformat
        navigator.clipboard.writeText(codeBlock.innerText).then(function () {
          setTimeout(function () {
            copy.innerText = 'Copy';
          }, 500);
        }, function (err) {
          copy.innerText = 'ERROR';
        });

        // do nothing else...
        e.preventDefault();
        e.stopPropagation();

      }, false);

      // insert before codeBlock <pre><a><code>
      codeBlock.parentNode.insertBefore(copy, codeBlock);
    });
  }
};

a.btn-copy,
a.btn-copy:hover {
  color: black;
  user-select: none;
  position: absolute;
  padding: 8px;
  font-size: smaller;
  right: 0;
  top: 0;
}

As with many new APIs, navigator.clipboard is only supported for pages served over HTTPS. To help prevent abuse, clipboard access is only allowed when a page is the active tab. Pages in active tabs can write to the clipboard without requesting permission, but reading from the clipboard always requires permission.

https://developers.google.com/web/updates/2018/03/clipboardapi