JQuery:在 'memory' 而不是 DOM 中构建 HTML

Question

有没有办法在将 HTML 片段添加到 DOM 之前“预先构建”它？

例如:

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

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

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

而不是像上面所示在内存中创建整个节点。