Как сформировать меню на уровне 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('вам виднее, что тут должно быть');
const className = 'inner__menu anchor-js';

Собираем разметку:

const menuHTML = Array.from(headers, n =>
  `<a class="${className}" href="#${n.parentNode.id}">${n.innerText}</a>`
).join('');

// можем добавить новое содержимое, не трогая то, что уже есть
menu.insertAdjacentHTML('beforeend', menuHTML);
// или новый контент перезапишет существующий
menu.innerHTML = menuHTML;

Или создаём элементы напрямую:

const menuElements = Array.from(headers, n =>
  Object.assign(document.createElement('a'), {
    className,
    href: `#${n.parentNode.id}`,
    text: n.textContent,
  })
);

// добавляем
menu.append(...menuElements);
// перезаписываем
menu.replaceChildren(...menuElements);