Question

我正在考虑将html添加到我的页面的最有效方法。我目前有：

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

然后我将它添加到页面中....是否有更有效的方法或者这是什么呢？

Answer 1

实际上，使用jQuery创建元素的禁区方法是使用：

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

创建一个像$('<tbody></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垃圾收集在连接时会发臭。

Answer 2

除了你正在做的事情之外，还有html()方法。

Answer 3

就速度而言，这可能是最有效的方式。在许多情况下，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实现更好的元素构建方法。

Answer 4

有几个jQuery模板插件。我建议看看以下内容：

Answer 5

我会说这就是它。据我了解，最小化DOM插入次数非常重要。

Answer 6

或者这样：

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

Answer 7

如果要重复插入HTML（例如通过循环），那么我将使用jQuery模板插件。我更喜欢微软用John Resig的原创设计制作的那个。它完成了工作。阅读它here。

就像这样......

在页面部分定义模板。

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

这里有一些测试数据：

var testData = 
{
  headerText: 'Hello World',
  someText: 'A long random paragraph about nothing, or Lorem Ipsum.. yadayaya',
  href: 'http://www.stackoverflow.com/'
}

然后您可以随时随地使用模板：

$('#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>

您可以根据需要创建复杂的结构。它易于阅读和维护。

享受：）

然后你可以反复使用它。

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

7 个答案: