Как импортировать html файл в другой html файл c помощью JS/jQuery?

Как импортировать html файл в другой html файл c помощью JS/jQuery? Мне нужно избежать дублирования кода.


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

Автор решения: Sergei Kirjanov

Существует огромное количество способов включить один HTML в другой.

Способы композиции можно разделить на основные типы по месту/времени отработки:

  1. во время публикации (генератор статических сайтов, например Jekyll / GitHub Pages)
  2. на сервере, при обработке запроса HTML (SSI <!--#include..., или любые языки и шаблонизаторы)
  3. на клиенте (далее рассматривается она)

Если вам есть дело до SEO, то лучше проконсультироваться по поводу применимости композиции на клиенте.

Вариант с React-компонентом: если включается не документ с текстом, а интерактивный элемент (например калькулятор или корзинка), то его лучше не делать HTML-ем.

Вариант с jQuery с дополнительными запросом: $("#content").load("menu.html")

Вариант без библиотек с дополнительными запросом:

function include(selector,address){
    fetch(address).then(resp => resp.text())
        .then(data => { document.querySelector(selector).innerHTML = data } )
}

Вариант с js-bundler (например, в webpack loader): HTML при сборке (во время публикации) преобразуется в js-строку в составе бандла, который подгружается целиком.

Вариант с "Web Components": в этом случае включаемый HTML больше изолирован.

Существует также множество вариаций этих и других способов.

→ Ссылка
Автор решения: Esoteric
document.querySelector(selector).appendChild(html);
$("#elem").append(html)
→ Ссылка