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

例如:

$mysnippet.append("
hello
");
$mysnippet.append("
world
");
$("destination").append($mysnippet);

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

1> fbuchinger..：

---

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

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

例如这个html:

   
Template Headline
   
Summary goes here
   View full story

这样做更快更容易理解:

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);

而不是如上所示在内存中创建整个节点.

---

你忘了你附加了仍然隐藏的克隆.. $('#destination').append($ clone.show())将解决这个问题.

---

@Niels这是我自己使用的(可能有点奇特的)约定 - 持有jQuery-selectors的变量以`$`为前缀,给它们一些jQuery"flavor",以帮助将它们与其他局部变量区分开来.

2> adam..：

---

是的,你完全是这样做的

一些延伸...

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

然后最后

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

---

我发现.wrap()不适用于内存/外部dom元素.

3> bart s..：

---

旧线程,但我在寻找相同的时候撞到了它.

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

memtag现在是一个内存中的html标记,可以根据需要插入到DOM中.如果您使用img标记执行此类操作,则可以将图像"预加载"到缓存中以供以后使用.