我对如何插入大量HTML感到很不好。
假设我们得到了：

var html =" <table> .. <a-lot-of-other-tags />..</ table>"`

我想把它放进去

$("＃mydiv")

以前我做过类似的事情

var html_obj = $(html);$("＃mydiv")。append(html_obj);

jQuery解析html以创建DOM对象是否正确？好吧，这就是我在某处阅读的内容(更新：我的意思是我已经阅读过，jQuery解析html来手工创建整个DOM树，这毫无意义吧！)，所以我更改了代码：

$("＃mydiv")。attr(" innerHTML"，$("＃mydiv")。attr(" innerHTML")+ html);`

感觉更快，是吗？并且它等效于：

document.getElementById(" mydiv")。innerHTML + = html吗？还是jquery在后台做一些其他昂贵的事情？

我也想学习替代方法。

解决方案

对于初学者，编写一个脚本，将每种方法花费100或者1,000次的时间乘以该时间。

为了确保重复代码没有被优化(我不是JavaScript引擎专家)，每次都要插入我们要插入的html，例如，将" 0001"然后" 0002"然后" 0003"放在特定位置表格的单元格。

我们想避免什么？ "不好的感觉"非常模糊。如果我们听到" DOM缓慢"并决定"避免DOM"，那么这是不可能的。将代码插入页面的每种方法(包括innerHTML)都将导致创建DOM对象。 DOM是浏览器内存中文档的表示形式。我们要创建DOM对象。

人们之所以说" DOM很慢"，是因为使用" document.createElement()"(这是用于创建元素的官方DOM接口)创建元素的速度比在某些浏览器中使用非标准的innerHTML属性要慢。这并不意味着创建DOM对象很糟糕，而是必须创建DOM对象，否则代码将根本无法执行任何操作。

我们提到对替代品感兴趣。如果查看与DOM相关的jQuery插件的列表，我们会发现一些专用于以编程方式生成DOM树的插件。例如，参见SuperFlyDom或者DOM Elements Creator；但还有其他。

innerHTML的速度非常快，而且在许多情况下，只要将其设置为最佳即可(我将仅使用append)。

但是，如果" mydiv"中已经有很多内容，那么我们将迫使浏览器再次解析并呈现所有这些内容(之前存在的所有内容以及所有新内容)。我们可以通过将文档片段添加到" mydiv"上来避免这种情况：

var frag = document.createDocumentFragment();
frag.innerHTML = html;
$("#mydiv").append(frag);

这样，仅解析(不可避免)新内容，而不会解析现有内容。

编辑：我不好...我发现文档片段对innerHTML的支持不佳。我们可以对任何节点类型使用相同的技术。对于示例，我们可以创建根表节点，然后将innerHTML插入其中：

var frag = document.createElement('table');
frag.innerHTML = tableInnerHtml;
$("#mydiv").append(frag);

关于使用DOM片段的答案是正确的。如果我们有一堆不断插入DOM的html对象，那么使用该片段会看到一些速度上的改进。 John Resig的这篇文章很好地解释了这一点：
http://ejohn.org/blog/dom-documentfragments/

请尝试以下方法：

$("#mydiv").append(html);

其他答案(包括可接受的答案)的速度要慢2到10倍：jsperf。

接受的答案在IE 6、7和8中不起作用，因为由于IE：jsbin中的错误，我们无法设置<table>元素的innerHTML。