在jquery中创建html的最有效方法是什么？

我正试图想出一种最有效的方法，将html添加到我的页面中。我目前有：

jQuery("<tbody><tr class='section toggle-minus'><td colspan='3' class='toggle' id='make-"+id+"'>"+name+" (0)</td></tr></tbody>");

jQuery（“+name+”（0）”；

---

然后我把它添加到页面上。。。。有没有一种更有效的方法，或者说这就是最有效的方法？

除了你正在做的事情之外，还有一种方法。

这可能是速度方面最有效的方法。jQuery允许浏览器解析HTML，这很快。。。在许多情况下，比DOM操作更快

就我个人而言，我不喜欢生成HTML字符串，也不喜欢处理转义用户输入之类的事情，所以我经常定义这个额外的小方法：

$.fn.create = function(name) {
    return $(document.createElement(name));
};

您可以将其与其他jQuery函数结合使用来创建任何HTML结构

$.create("tbody").append(
    $.create("tr").attr("class": "section toggle-minus").append(
        $.create("td") /* et cetera */
    )
)

---

不过这有点言过其实，总有一天我肯定会为jQuery实现一种更好的元素构建方法。

我会说这就是它。据我所知，最小化DOM插入的数量非常重要

或者这样：

$([
'<tbody>',
    '<tr class="section toggle-minus">',
        '<td colspan="3" class="toggle" id="make-"', id, '">', name,' (0)','</td>',
    '</tr>',
'</tbody>'
].join(''));

$([
'',
'',
“实际上，使用jQuery创建元素的最快方法是：

$(document.createElement('tbody'));

创建这样的元素
$（“”）
，比上面的方法慢一点

以下是执行您正在执行的操作的最佳方式：

已更新

jQuery(document.createElement('tbody')).append(
    jQuery(document.createElement('tr')).append(
        jQuery(document.createElement('td'))
            .addClass('toggle')
            .html([name," (0)"].join(''))
            .attr({
                'colspan' : '3',
                'id' : ['make-',id].join('')
            })
    ).addClass('section toggle-minus')
);

最后一件事是将其附加到文档中。之所以使用连接，是因为连接时ie6/7垃圾收集会发出臭味。
有几个jQuery模板插件。我建议查看以下内容：





如果要重复插入HTML（例如通过循环），那么我会使用jQuery模板插件。我更喜欢Microsoft根据John Resig的原始设计制作的插件。它完成了任务。请阅读相关内容

它是这样工作的

在页面的部分中定义模板

<script id="myTemplate" type="text/html">
  <div>
    <h3>${headerText}</h3>
    <p>${someText}</p>
    <a href="${linkHref}">Click Me</a>
  </div>
</script>

然后，您可以随时根据需要使用该模板：

$('#myTemplate').tmpl(testData).appendTo('body');

结果：

<div>
  <h3>Hello World</h3>
  <p>A long random paragraph about nothing, or Lorem Ipsum.. yadayaya</p>
  <a href="http://www.stackoverflow.com/">Click Me</a>
</div>


你好，世界
一段关于虚无的长而随意的段落，或者叫Lorem Ipsum..yadayaya


您可以创建任意复杂的结构。它非常容易阅读和维护

享受：）

然后你可以重复使用它。
这是采用最慢的方法，并使它稍微快一点。修复了一个打字错误，现在应该很好了。我的代码编写速度太快了。修复了两个以上的打字错误。这对于创建单个元素来说可能更快，但是你确定对于整个元素来说更快吗？至少一段时间以前，
innerHTML
比任何DOM操作都要快。我想知道是否有人使用现代浏览器在这方面做过基准测试。我也想知道，这是个好问题。我要用谷歌搜索一个小时。；）我使用这种方法通过巧妙地混合使用
.clone（）创建了许多元素
并级联
.attr
和
.addClass
方法。基本上，您从一个元素开始，添加它与其他元素共享的所有公共属性，克隆它，然后开始添加最终属性，所有这些都是在插入之前完成的。完成时速度非常快。
<div>
  <h3>Hello World</h3>
  <p>A long random paragraph about nothing, or Lorem Ipsum.. yadayaya</p>
  <a href="http://www.stackoverflow.com/">Click Me</a>
</div>