JQuery:在"内存"而不是DOM中构建HTML

Question

有没有办法在将其添加到DOM之前"预先构建"一段HTML？

例如:

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

其中$ mysnippet不存在于DOM中.我想动态构建一些html块,然后在适当的时候将它们插入到页面中.

Answer 1

处理更复杂的节点(尤其是嵌套的节点)时,在HTML中编写节点并隐藏其可见性是一种更好的方法.

然后,您可以使用JQuery的clone()方法制作节点的副本,并根据您的需要调整其内容.

例如这个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标记执行此类操作,则可以将图像"预加载"到缓存中以供以后使用.