JQuery: создайте HTML в "памяти", а не DOM

Есть ли способ "предварительно построить" фрагмент HTML, прежде чем добавлять его в DOM?

Например:

$mysnippet.append("<h1>hello</h1>");
$mysnippet.append("<h1>world</h1>");
$("destination").append($mysnippet);

где $mysnippet не существует в DOM. Я хотел бы динамически наращивать некоторые комки html, а затем вставлять их на страницу в соответствующие пункты позже.

Ответы

Ответ 1

Да очень точно, как вы это сделали

Некоторое расширение этого...

$('<div>').attr('id', 'yourid').addClass('yourclass').append().append()...

а затем, наконец,

.appendTo($("#parentid"));

Ответ 2

При работе с более сложными узлами (особенно сильно вложенными) лучше всего написать node в HTML и скрыть его видимость.

Затем вы можете использовать метод jQuery clone() для создания копии node и адаптировать его содержимое к вашим потребностям.

например. с этим html:

<div class="template-node" style="display:none;">
   <h2>Template Headline</h2>
   <p class="summary">Summary goes here</p>
   <a href="#" class="storylink">View full story</a>
</div>

это намного быстрее и понятно:

var $clone = $('.template-node').clone();
$clone.find('h2').text('My new headline');
$clone.find('p').text('My article summary');
$clone.find('a').attr('href','article_page.html');
$('#destination').append($clone);

чем создать весь node в памяти, как показано выше.

Ответ 3

Старый поток, но я натолкнулся на него, ища то же самое.

var memtag = $('<div />', {
                'class'    : 'yourclass',
                'id'       : 'theId',
                'data-aaa' : 'attributevalue',
                html       : 'text between the div tags'
});

memtag теперь является тегом html в памяти и может быть вставлен в DOM, если вы хотите. Если вы делаете такую ​​вещь с тегом img, вы можете предварительно загрузить изображения в кеш для последующего использования.

Ответ 4

Конечно, просто создайте их как строку:

$mysnippet = "<h1>hello</h1>";
$mysnippet = $mysnippet + "<h1>world</h1>";
$("destination").append($mysnippet);

Ответ 6

var sample =
    $('<div></div>')
        .append(
            $('<div></div>')
                .addClass('testing-attributes')
                .text('testing'))
        .html();

Что создает:

<div class="testing-attributes">testing</div>

Ответ 7

Вы можете предварительно создать его, а также присоединить события, а также атрибуты данных, внутренний html и т.д. и т.д.

var eltProps = {
    css: {
        border: 1,
        "background-color": "red",
        padding: "5px"
    },
    class: "bblock",
    id: "bb_1",
    html: "<span>jQuery</span>",
    data: {
        name: "normal-div",
        role: "building-block"
    },
    click: function() {
         alert("I was clicked. My id is" + $(this).attr("id"));
    }
};

var elt = $("<div/>", eltProps);

$("body").append(elt);