Как вставить html файл в другой html файл?

Question

[Артём]

Слишком длинный html код,как можно в html загружать другой html с куском кода?

Comments

[Сергей delphinpro]

Вы цель поясните, чтобы получить конструктивные ответы.

[Артём]

Сергей: код слайдера слишком длинный,я решил его написать в отдельном файле и чтобы просто вставить этот файл в код

[Сергей delphinpro]

Артём: Обычно ваш код будет прикручен к какой-либо CMS, в которой, слайдер, скорее всего будет выступать отдельным модулем. Но даже в упрощенном допущении - все серверные языки поддерживают операцию инклуда файлов.
Другое дело, если вы разрабатываете предварительную верстку для передачи ее программисту, и вам неудобно работать с "простыней" кода. В этом случае разработчики используют так называемые системы сборки, которые и позволяют собирать файлы из кусочков, выполнять пре- и постпроцессинг над стилевыми и джаваскрипт-файлами, минифицировать их и прочее. Наиболее популярные - gulp, grunt, webpack и т.п.

Answer 1

[Umid]

iframe

Answer 2

[Александр]

...или HTML импорт:

<link rel="import" href="/index.html">

Comments

[Артём]

А если мне надо в определенном месте чтобы код вставлялся?

[Александр]

Артём: тогда можно "импортировать" код с помощью AJAX-запроса.

Answer 3

[Александр Зачиналов]

Способы инклуда html, без использования серверных языков:
1) Использование систем сборки проектов (Gulp, Grunt, Yeoman, Brunch) в сочетании с html препроцессором - Jade, Haml и аналогов
2) Использование хелперов из библиотек MVC-фреймворков (React, Angular, Ember, Khockout и др)
3) Использование js-шаблонизаторов отдельно (Mustache, Handlebars, Twigjs, Closure Templates и др)
4) Использование плагинов шаблонизации (Jquery Template, утилита _.template из поставки Underscore, Tempo и др)

Comments

[Артём]

Вот я пользуюсь gulp'ом,что дальше?

[Александр Зачиналов]

Дальше нужно выбрать один из препроцессоров html, например Jade, поставить для него плагин gulp-jade, и использовать для верстки .jade файлы, которые затем Gulp будет конвертировать в чистый html. Сам же Jade поддерживает инклуд одного шаблона в другой. Подробнее здесь: jade-lang.com/reference/includes

Answer 4

[Hooudini]

Можно это осуществить при помощи одной строчки js

<div id="value" style="display: inline-block"></div>

document.getElementById('value').textContent = '<div>текст</div>';

в итоге получите <div>текст</div>