使用jQuery添加DOM元素的最佳方法

所以我見過三種方法將html/DOM元素添加到頁面中。我很好奇他們每個人的優點和缺點。使用jQuery添加DOM元素的最佳方法

1 - 傳統的JavaScript

我相信直JS的方式來做到這一點是通過構建每個元素，設置屬性，然後附加它們。例子：

var myRow = document.createElement("tr"); 
myRow.class = "myClass"; 

var firstTD = document.createElement("td"); 
firstTD.innerHTML = "first"; 
myRow.appendChild(firstTD); 

var secondTD = document.createElement("td"); 
secondTD.innerHTML = "second"; 
myRow.appendChild(secondTD); 

document.getElementById("myContainer").appendChild(myRow);

2 - 通過jQuery

追加HTML字符串我已經注意到，大多數的jQuery的例子，我看到平時只是追加HTML的字符串。
例子：

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>');

3 - jQuery的jQuery中.clone（）

我也看到了很多的用途，並引用到.clone（）。
例子：

$("#myContainer").append($(".myClass").Clone());

我很想聽聽別人怎麼說這個。

（同樣，這似乎是一個不錯的人選了「社區維基」，但我不是太熟悉。會有人評論，讓我知道，如果它應該是什麼？謝謝）

來源

2010-02-04 sdr

它是'innerHTML'而不是'innerHtml'。 – 2010-02-04 20:12:27

進行更新 – sdr 2012-04-25 18:06:07

僅兩年後:) – 2012-04-25 18:34:56

如果您使用jQuery 1.4的最佳方式是：

$("<a/>", { 
    id: 'example-link', 
    href: 'http://www.example.com/', 
    text: 'Example Page' 
}).appendTo("body");

來源

2010-02-04 20:46:29

@sp，這將如何鏈接以完成示例？（不要批評，只是不知道這是如何工作的嵌套元素。） – user113716 2010-02-05 22:50:35

http://pastie.org/812613 這將創建tr，添加tds並將其追加到容器 – 2010-02-06 19:22:58

該代碼如何創建tr，添加tds並將其追加到容器？看起來你只是添加一個鏈接到body元素！ – richard 2013-11-11 03:15:48

-2

更乾淨的方法是使用jQuery。

$('tr').addClass('myClass')類似的語法。這很容易閱讀，理解和維護。

來源

2010-02-04 18:56:56

這根本與帖子無關。 – RyanDawkins 2016-08-31 17:07:15

如果您已經有jQuery，請使用它。如果您不想託管它，請使用Google的託管版本。最後總是調用本地javascript createElement或innerHTML方法。所以我會使用＃2和＃3，如果我特別需要克隆頁面上的現有元素。

來源

2010-02-04 18:58:48

如果你已經擁有你想要通過各種手段使用克隆複製，然後模板元素（）。

但是如果你想從頭開始創建一個元素，則有兩種基本方法，我想你提到：

創建DOM元素對象（使用的createElement爲例）。
將DOM元素創建爲HTML（例如，使用innerHTML或jQuery的html（））。

首先，如果其中任何一種方法更直觀或更容易爲您寫，我建議只是這樣做。

使用後者的其他好處是，如果元素有許多孩子，它就更清潔。例如，嘗試使用6列製作表格行，每列使用第一種方法制作不同的類。你的代碼將比使用第二種方法的時間長得多。

就績效而言，這是一個很好的指導http://andrew.hedges.name/experiments/innerhtml/但簡單的答案是大多數情況下的差異是微不足道的。一般來說，一個好的性能指南是：http://www.artzstudio.com/2009/04/jquery-performance-rules/。第六個技巧與DOM操作有關。

來源

2010-02-04 21:24:54 jhchen

如果你正在使用大量的HTML，你想重用，那麼我建議你看看：http://api.jquery.com/jQuery.template/這是最終的，但會被更好的東西取代。

我在生產環境中使用它，它是偉大的，至於小的HTML片段什麼SP。說是最好的方式

來源

2012-01-31 19:25:13

這是一個404;你的意思是http://codepb.github.io/jquery-template/或其他什麼？ – 2013-12-09 17:57:52

這是一個已停用的插件，儘管最初是官方的，但現在有更好的解決方案，比如mustache.js等。 – 2013-12-11 21:23:12

克隆現有的內容...

var $html = $template.clone();

 $html.find(''); ///after change content...

由於克隆的內容是 'DOM' 屬性。然後你可以改變這個標籤，屬性，值然後附加它..

來源

2014-04-09 11:55:32 pradeep

使用jQuery添加DOM元素的最佳方法

回答

相關問題