Как вывести в один div все элементы h3 из определенной section?

Question

Есть упрощенный код:

<div id="sidebar"> ... </div>
<section id="vacancies"> ...
     <div class="vacancy-container" id="id1"> ...
       <h3><a href="#id1">Вакансия 1</a></h3> ...
     </div>
     <div class="vacancy-container" id="id2"> ...
       <h3><a href="#id2">Вакансия 2</a></h3> ...
     </div>
<section>

Это страница вакансий. Мне нужно разместить в sidebar ссылки на все вакансии, т.е. фактически содержание всех h3 в section id="vacancies".

Знаю, что JQuery к сайту не подключали, думаю, возможно решения были не нем, честно говоря, я их не отличаю. Плюс может дело осложняется тем, что блок с контентом расположен ниже блока с сайдбаром.

Плюс PHP использовать очень проблематично, т.к. дело происходит в вордпрессе в редакторе страниц, где без доп. плагинов не вставить фрагменты кода PHP. Я могла бы перенести sidebar в шаблон страницы, но section перенести не могу, т.к. вакансии постоянно редактируют люди почти без навыков HTML.

Поэтому прошу подсказать решение, желательно или чистым JS, можно в теге <script>, или в шаблоне страницы в вордпресс в PHP.

Answer 1

Если я правильно понял, то вам надо просто достать всё что внутри h3 и скопировать в sidebar:

const sidebar = document.querySelector('#sidebar');
const vacancies = document.querySelectorAll('#vacancies h3');

vacancies.forEach(vacancy => sidebar.innerHTML += vacancy.innerHTML);

<div id="sidebar"></div>
<section id="vacancies">
     <div class="vacancy-container" id="id1">
       <h3><a href="#id1">Вакансия 1</a></h3>
     </div>
     <div class="vacancy-container" id="id2">
       <h3><a href="#id2">Вакансия 2</a></h3>
     </div>
<section>

БЛОГ НА HUSL

Как вывести в один div все элементы h3 из определенной section?

Ответы (1 шт):