Можно ли реализовать такое с помощью js?

Question

[Новичок Впо]

У меня есть header на многостраничном сайте, как реализовать чтобы мне не переносить весь код header-а на каждую страницу, а просто добавить его в отдельный js файл и подключить к каждой странице, я знаю как это сделать с помощью php, а возможно ли это реализовать на js и как?

Answer 1

[Дмитрий Беляев]

Можно.

Вариант 1: зашить html код блока строкой в JS и вставлять через DOM операции в страницу, например через insertAdjacentHTML.

Вариант 2: использовать шаблонизаторы, такие как handlebarsjs, по сути то же, что и вариант 1, но еще и позволит просто подставлять данные в HTML.

Вариант 3: использовать UI фреймворк или библиотеку, такие как svelte, vue или react.

Ну и маленький совет, если у Вас будет отдельный скрипт, который чисто выводит Ваш header на страницу, то подключать его можно прямо в месте расположения header, но подключать его нужно с атрибутом async, что бы он не мешал загрузке остальной страницы. И вставлять HTML код в этом случае можно относительно тега script, получить который можно через document.currentScript