Как подключить html файл в другой файл html, чтобы он отображался в дизайне

Представьте, что у нас сайт на html и в нем более 100 страниц. Если нам понадобится подредактировать контактные данные или изменить элемент дизайна, то придется редактировать все 100 страниц. Что крайне не удобно.

Конечно, я бы никогда не делал сайт на обычном html. Лучше использовать index.pnp и методом include('файл'); подгружать нужные части сайтов.

Поэтому предлагаю использовать js плагин, который позволит вставлять в index.html (главная страница сайта) общие "блоки", которые часто надо редактировать: footer.html, header.html, menu.html и т.д.

Принцип действия такой: вы пишите тег с атрибутом, в который вставляете путь к подключаемому файлу (в примере вы найдете структуру, она простая). Далее, при загрузке сайта, js скрипт в указанный тег подгрузит все содержимое подключаемого файла. Более того, он сможет загрузить и скрипты, которые находятся в этих файлах.

Но есть и второй способ подключения html файлов в другой html за счет ajax.

Мне он нравится гораздо больше, чем использование js плагина. Посмотрите рабочий код:

<script src="jquery-1.9.1.min.js"></script>
<script>
jQuery.ajax({
url: "main-menu.html",
dataType: "html",
success: function(response) {
document.getElementById('container1').innerHTML = response;
}
});
</script>

<div id="container1"></div>

Работает он так: в div с id="container1" методом ajax подгружается содержимое файла main-menu.html. Огромные преимущества подгрузки через ajax - минимум кода, который обрабатывается намного быстрее плагина. Также при ajax подгрузке не нужно указывать кодировку title, meta и прочее (как это было с плагином) - достаточно указать нужные теги, которые и сформируют вашу верстку.