JQuery: сборка HTML в «памяти», а не в DOM

Question

Есть ли способ предварительно скомпоновать фрагмент HTML-кода перед его добавлением в DOM?

Например:

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

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

Answer 1

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

Затем вы можете использовать метод clone () JQuery, чтобы сделать копию узла и адаптировать его содержимое к вашим потребностям.

например. с этим 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);

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

Answer 2

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

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

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

и, наконец,

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

Answer 3

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

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

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

Answer 4

Вы можете предварительно построить его, а также прикрепить события, а также атрибуты данных, внутренний 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);

Answer 5

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

Что создает:

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

Answer 6

Для этого есть плагин:

http://plugins.jquery.com/project/appendText

Answer 7

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

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