Inserts heading navigation for long documents

article_navigation.js

const datalist = document.createElement('datalist');
datalist.setAttribute('id', 'header-list');

Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6")).forEach(headerNode => {
  const id = headerNode.id || headerNode.innerText.replace(/\W/g, '_') || Math.random();
  headerNode.setAttribute('id', id);
  const option = document.createElement('option');
  option.setAttribute('value', headerNode.innerText);
  option.dataset.target = id;
  datalist.appendChild(option);
});

const input = document.createElement('input');
input.setAttribute('list', 'header-list');
input.addEventListener('change', event => {
  const value = input.value;
  const option = Array.from(datalist.children).find(option => option.value === value);
  if (option.dataset.target) {
    location.hash = "#" + option.dataset.target;
  }
});

const container = document.createElement('div');
container.appendChild(input);
container.appendChild(datalist);

document.body.insertBefore(container, document.body.firstChild);