JQuery：在“内存”而不是 DOM 中构建 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/337352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Build HTML in 'memory' rather than DOM
提问by jdee
Is there a way to 'pre-build' a snippet of HTML before adding it to the DOM?
有没有办法在将 HTML 片段添加到 DOM 之前“预构建”它？
For example:
例如：
$mysnippet.append("<h1>hello</h1>");
$mysnippet.append("<h1>world</h1>");
$("destination").append($mysnippet);
where $mysnippetdoesnt exist in the DOM. I'd like to dynamically build up some lumps of html and then insert them into the page at appropriate points later.
其中$ mysnippet犯规存在的DOM。我想动态地构建一些 html 块，然后在适当的时候将它们插入到页面中。
回答by fbuchinger
When dealing with more complex nodes (especially heavily nested ones), it is a better approach to write the node in HTML and set its visibility hidden.
在处理更复杂的节点（尤其是嵌套严重的节点）时，用 HTML 编写节点并将其可见性设置为隐藏是一种更好的方法。
You can then use JQuery's clone() method to make a copy of the node and adapt its contents to your needs.
然后，您可以使用 JQuery 的 clone() 方法制作节点的副本并根据您的需要调整其内容。
E.g. with this html:
例如用这个 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>
it's much faster and understandable to do:
这样做更快且易于理解：
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);
than to create the entire node in memory like shown above.
而不是像上图那样在内存中创建整个节点。
回答by adam
Yes pretty much exactly how you have done it
是的，你是怎么做到的
Some extension of this...
这个的一些扩展...
$('<div>').attr('id', 'yourid').addClass('yourclass').append().append()...
and then finally
然后最后
.appendTo($("#parentid"));
回答by bart s
Old thread but I bumped into it while searching for the same.
旧线程，但我在搜索时撞到了它。
var memtag = $('<div />', {
'class' : 'yourclass',
'id' : 'theId',
'data-aaa' : 'attributevalue',
html : 'text between the div tags'
});
memtagis now an in memory html tag, and can be inserted into the DOM if you want. If you do such thing with an imgtag you can 'preload' images into the cache for later use.
memtag现在是内存中的 html 标记，如果需要，可以插入到 DOM 中。如果您使用img标签执行此类操作，您可以将图像“预加载”到缓存中以备后用。
回答by Timothy Gonzalez
var sample =
$('<div></div>')
.append(
$('<div></div>')
.addClass('testing-attributes')
.text('testing'))
.html();
Which creates:
这创造了：
<div class="testing-attributes">testing</div>
回答by Mitja Gustin
You can prebuild it and also attach events, as well as data attributes, inner html, etc, etc.
您可以预先构建它并附加事件，以及数据属性、内部 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);
回答by James Curran
Sure, just build them as a string:
当然，只需将它们构建为字符串：
$mysnippet = "<h1>hello</h1>";
$mysnippet = $mysnippet + "<h1>world</h1>";
$("destination").append($mysnippet);
