问题描述
我有很多元素，我的一个JS小部件需要经常创建和添加到DOM。他们从不改变。
所以一个选择是将HTML本身作为一个字符串存储在JS中，并使用JQuery从字符串创建元素，然后将其附加到文件：
var elements =< div>< table>< tr>< td> 1< / td> ;< TD> 2'; / TD>< / TR>< /表>< / DIV>中;
function create（）{
return $（elements）;
}
$（body）。append（create（））;
另一个选项是编写一个将使用document.createElement（div）或$ （< div>）多次构建元素，在需要时将它们附加到对方，然后附加到文档中：
function create（）{
return $（< div>）。append（$（< table>）......
}
$ （body）。append（create（））;
在第一种情况下，实际上是HTML的大JS字符串。在第二种情况下，我有一个实际上代表HTML的笨重的JS。
有一个或多个其他？有没有更好的解决方案我不在想？
注意：如果你讨厌阅读，检查下面的摘要以获得最终答案
也许你不需要在jQuery的帮助下创建这些。
如果该html的结构很复杂（因此使用document.createEle我会用 innerHTML 属性来执行。
//代码中的某个地方，最好在全局范围之外
var div = document.createElement（'div' ）
div.id ='mycustomdiv'
document.getElementsByTagName（'body'）[0] .appendChild（div）;
//假设元素包含HTML元素的元素
div.innerHTML = elements;
这样你就可以避免（假设再次）在jQuery对象中创建和包装元素的不必要的开销。
更新：测试为您自己最快的方法是什么。此测试证实，当您尝试挤压每一次性能时，将其转换为香草JavaScript和经典DOM操作。
更新2.为了调查为什么Firefox 10中的innerHTML方法在将完整的字符串传递给jQuery.append方面有这么糟糕的结果，我看了一下jQuery源码。
事实证明（在jQuery 1.7.1中），他们正在使用另一种通过使用（当然对于没有适当支持的浏览器，有一些回退）。
假设createDocumentFragment可用，在脚本的整体跨浏览器性能方面是最好的方法。
所以，总结一下：
如果您在创建新的DOM元素时寻求在不同浏览器中的最佳性能，请专注于文档片段（如果您不想自己处理各种角色，请使用jQuery）。
有关documentFragment的更多阅读，请查看John Resig博客上的这篇文章
I have many elements that one of my JS widgets needs to create and add to the DOM often. They never change.
So one option would be to store the HTML itself as a string in JS and use JQuery to create the elements from the string, then append it to the document:
var elements = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
function create() {
return $(elements);
}
$("body").append(create());
Another option is to write a function that will use document.createElement("div"), or $("<div>") many times to build the elements, append them to each other where needed, then append to the document:
function create() {
return $("<div>").append($("<table>")......
}
$("body").append(create());
In the first case, I have a big JS string that is actually HTML. In the second case, I have an unwieldy piece of JS that actually represents HTML.
Are there (dis)advantages to one or the other? Is there a better solution I'm not thinking of?
Note: If you hate reading, just check summary down below for final answer
Maybe you don't really need to create those with help of jQuery.
If the structure of that html is complicated (hence using document.createElement approach would be an overkill) I would go with innerHTML attribute.
// somewhere in your code, preferably outside of global scope
var div = document.createElement('div')
div.id = 'mycustomdiv'
document.getElementsByTagName('body')[0].appendChild(div);
// assuming elements contains string of html with your elements
div.innerHTML = elements;
That way you avoid the (assuming again) unnecessary overhead of creating and wrapping the elements in jQuery object.
Update: test for yourself what's the fastest method http://jsperf.com/creating-complex-elements. This test confirms that when you're trying to squeeze every last bit of performance revert to vanilla javascript and classic DOM operations.
Update 2. To investigate why innerHTML method on Firefox 10 have such bad results in relation to passing full string to jQuery.append, I took a look at the jQuery source.
As it turns out (in jQuery 1.7.1), they're using yet another way of creating dom elements by utilizing document.createDocumentFragment (with some fallbacks of course for browsers that don't have proper support).
Assuming createDocumentFragment is available it turns out to be the best approach in terms of overall cross-browser performance of script.
So, to sum up:
I stand corrected. If you're looking for best performance throughout different browsers when creating new DOM elements, focus on document fragments (use jQuery if you don't want to deal with various corner cases yourself).
For more reading concerning documentFragment check this post on John Resig blog http://ejohn.org/blog/dom-documentfragments/
这篇关于在JavaScript中创建大型静态DOM元素的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！