Как сформировать меню на уровне js или jquery?

Question

[aheles]

На странице есть схожая верстка блоков по типу: секция->заголовок

<section id="section_1">
     <h2>Заголовок №1</h2>
</section>

<section id="section_2">
     <h2>Заголовок №2</h2>
</section>

Как через js или jquery сделать так: обойти все элементы с заголовком (h2) и вывести в меню с названием секции с href аттрибутом id секции?
Например, из примера выше контента сгенерированное меню должно быть таким:

<a href="#section_1" class="inner__menu anchor-js">
   Заголовок №1
</a>

<a href="#section_2" class="inner__menu anchor-js">
  Заголовок №2
</a>

Answer 1

[0xD34F]

Заголовки и будущее меню:

const headers = document.querySelectorAll('section > h2');
const menu = document.querySelector('что здесь должно быть, понятия не имею, сами разберётесь');

Собираем меню:

menu.innerHTML = Array
  .from(headers, n => `<a href="#${n.parentNode.id}">${n.innerHTML}</a>`)
  .join('');

или

for (const { parentNode: p, textContent: t } of headers) {
  menu.insertAdjacentHTML(
    'beforeend',
    '<a href="#' + p.getAttribute('id') + '">' + t + '</a>'
  );
}

или

menu.append(...Array.prototype.map.call(headers, n => {
  const a = document.createElement('a');
  a.href = '#'.concat(n.parentNode.attributes.id.value);
  a.innerText = n.innerText;
  return a;
}));

или

headers.forEach(({ parentNode: { outerHTML } }) => {
  const a = document.createElement('a');
  a.setAttribute('href', outerHTML.match(/id="(.*?)"/).pop().replace(/^/, '#'));
  a.appendChild(document.createTextNode(outerHTML.match(/h2>(.*)<\/h2/)[1]));
  menu.insertAdjacentElement('beforeend', a);
});