在jQuery中創建html的最有效方法？

我試圖想到將html添加到我的頁面的最有效方法。我目前有：在jQuery中創建html的最有效方法？

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

然後我將其添加到頁面....是否有更有效的方法，或者這是非常多的？

來源

2010-09-23 Webnet

很可能在速度方面最有效的方式。在許多情況下，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更好的元素的建築方法。

來源

2010-09-23 20:46:35

除了你在做什麼之外，還有html()方法。

來源

2010-09-23 20:45:49 Sarfraz

+1是的，和html（）方法.. – skajfes 2010-09-23 20:48:42

我會說，這是相當多了。據我瞭解，減少DOM插入次數非常重要。

來源

2010-09-23 20:46:48 skajfes

或者這樣說：

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

來源

2010-09-23 20:52:28 San4ez

這是採取最慢的方法，並使其稍快。 – Stephen 2010-09-23 20:53:42

其實，創建與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垃圾收集在連接時會發臭。

來源

2010-09-23 20:52:57 Stephen

修正了一個錯字，現在應該是好的。 ** Yikes **我編碼太快。修復了另外兩個錯別字。 – Stephen 2010-09-23 21:00:35

創建單個元素的速度可能會更快，但是您確定它對於一大堆元素來說速度更快嗎？至少有一段時間，「innerHTML」比任何DOM操作都快。我想知道是否有人使用現代瀏覽器對此做了基準測試。 – 2010-09-23 21:15:41

這是一個很好的問題，我也很好奇。我去了谷歌一個小時。 ;） – Stephen 2010-09-24 12:31:26

有幾個jQuery的模板插件。我建議看以下內容：

來源

2010-09-23 20:59:19 calvinf

+1有趣的東西。 – Stephen 2010-09-23 21:12:31

如果你要反覆插入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>

您可以創建與y一樣複雜的結構你想要。閱讀和維護非常簡單。

享受:)

然後你可以反覆使用這個。

來源

2010-09-23 21:20:02

在jQuery中創建html的最有效方法？

回答

相關問題