Как сохранить фрагмент HTML и вставить его позже в документ?

Есть ли способ сохранить фрагмент HTML в переменной, используя Javascript или jQuery, как это? (Очевидно, это нерабочим пример)Как сохранить фрагмент HTML и вставить его позже в документ?

var mysnippet = << EOF 
<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 
EOF

А затем вставьте его в документ с помощью JQuery:

mysnippet.append($('#someelement'));

EDIT:

Пожалуйста, прочитайте это, прежде чем ответить на комментируя: У меня есть необработанный HTML-фрагмент внутри моего JS-файла, и мне нужно сохранить его в переменной Javascript, используя что-то вроде th при строительстве EOF. Мне нужно избегать помещать его между кавычками.

Если это невозможно, используя Javascript и/или jQuery, тогда вопрос не имеет решения.

источник

2012-02-09 David Morales

$ (mysnippet) .append (#someelement) – ZiTAL

Поскольку никакой разумный редактор файлов или linter не будет правильно отображать ваш js-файл, я уверен, что это ** всегда лучше **, чтобы поместить HTML в отдельный файл .html, а затем прочитать его с помощью '$ .get (" mysnippet.html ")'. Тогда у вас есть возможность редактировать DOM нового объекта перед добавлением Кроме того, HTML и JS можно легко нарисовать, а также отделять данные от кода, что всегда хорошо для будущей проверки. –

Вы можете использовать шаблоны JavaScript как ejs, haml-coffee ...

источник

2012-02-09 12:41:35 iblue

Я отмечаю ваш ответ как действительный, как кажется b единственный способ сделать то, что мне нужно. Например, используя erb (язык шаблонов Rails), я могу отобразить внешний код фрагмента кода HTML и избежать его с помощью помощника Rails, поэтому я могу, наконец, сохранить его в переменной, чтобы добавить его в документ. –

Просто получите код HTML div, который вы хотите, по var content = $('#somediv').html();, а затем добавьте его в какой-нибудь div позже! $('#otherdiv').append(content);

$().html(); поставляет содержание HTML этого div. документация: http://api.jquery.com/html/

$().append(<content>); добавляет контент в специальный div. documentatoin: http://api.jquery.com/append/

источник

2012-02-09 12:39:28

Код HTML, который я хочу добавить, должен быть в том формате, который я записал в мой вопрос. Он еще не существует в документе. –

в порядке, просто просто используйте метод .append() –

Да. Fiddle example

JavaScript

var html = '<b>Bold</b>' 
$('.anotherclass').append(html);

HTML

<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div>

источник

2012-02-09 12:41:36 Farmor

Вы могли бы написать:

var mysnippet = "<div class='myclass'>"+ 
    "<div class='anotherclass'>"+ 
    "Some dummy text"+ 
    "</div>"+ 
"</div>";

, а затем вставить использует append функцию (которая принимает фрагмент кода в качестве аргумента).

источник

2012-02-09 12:42:49

К сожалению, ничего подобного << EOF не имеется. Вот одно из решений:

$el = $('<div />') 
    .addClass('myClass') 
    .append(
    $('<div />') 
     .addClass('anotherclass') 
     .text('Foo Bar') 
);

источник

2012-02-09 12:44:04 osahyoun

Думая о том же вопросе Я нашел это обсуждение. Я имею в виду, чтобы поместить скрытый textarea, содержащий html, а затем извлечь html оттуда.

Таким образом, не будет конфликтов с удвоенными идентификаторами DOM, так как содержимое textarea не отображается как html.

источник

2012-10-31 02:26:32 Serge

Для тех, кто пришел через это, как я ... Вы можете использовать новый <template> тег в HTML5. Он по-прежнему не хранит HTML в JavaScript, к сожалению :(

источник

2014-03-29 05:09:39 thehappycheese

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template – Sean

Как сохранить фрагмент HTML и вставить его позже в документ?

ответ

Смежные вопросы