Можно ли как-то в javaScript/jQuery
, имея сам элемент, получить строку с его html-разметкой?
1 ответ
Элемент <template>
предназначен для хранения «образца» разметки, невидимого и предназначенного для вставки куда-либо.
Конечно, есть много способов записать произвольный невидимый текст в HTML. В чём же особенность <template>
?
Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и т.п.
Содержимое тега <template>
, в отличие, к примеру, от шаблонов или <script type="неизвестный тип">
, обрабатывается браузером. А значит, должно быть корректным HTML.
Оно доступно как DocumentFragment
в свойстве тега content. Предполагается, что мы, при необходимости, возьмём content и вставим, куда надо.
Вставка шаблона
Пример вставки шаблона tmpl в Shadow DOM элемента elem:
<p id="elem">
Доброе утро, страна!
</p>
<template id="tmpl">
<h3><content></content></h3>
<p>Привет из подполья!</p>
<script>
document.write('...document.write:Новость!');
</script>
</template>
<script>
var root = elem.createShadowRoot();
root.appendChild(tmpl.content.cloneNode(true));
</script>
У нас получилось, что:
- В элементе #elem содержатся данные в некоторой оговорённой разметке.
- Шаблон #tmpl указывает, как их отобразить, куда и в какие HTML-теги завернуть содержимое #elem.
- Здесь шаблон показывается в Shadow DOM тега. Технически, это не
обязательно, шаблон можно использовать и без Shadow DOM, но тогда не
сработает тег
<content>
.
Можно также заметить, что скрипт из шаблона выполнился. Это важнейшее
отличие вставки шаблона от вставки HTML через innerHTML
и от обычного
DocumentFragment
.
Также мы вставили не сам tmpl.content
, а его клон. Это обычная практика,
чтобы можно было использовать один шаблон много раз.
-
а как данный ответ относится к заданному вопросу про получение разметки элемента?– Grundy ♦20 июн 2017 в 15:35
-
2Хороший ответ. Возможно, на него еще зададут вопрос.– user17626220 июн 2017 в 15:36
-
-
Стоит под этот ответ самостоятельно задать вопрос и отпубликовать там ответом, а тут удалить. т. к. к вопросу вообще не относится. Ну и да, имеет смысл указать источник в PS, если действительно всё оттуда.– Qwertiy ♦21 июн 2017 в 21:10
element.outerHTML