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

Question

所以我已經看到了三種向頁面添加 html/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 的 .clone()

我還在 jQuery 中看到了很多對 .clone() 的使用和引用。
例子：

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

我很想聽聽其他人對此有何看法。

（另外，這似乎是“社區維基”的一個很好的候選者，但我對它們不太熟悉。有人會發表評論並告訴我是否應該這樣做嗎？謝謝）

Answer 1

如果您使用的是 jQuery 1.4，最好的方法如下：

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

Answer 2

如果您已經有一個要復制的模板元素，那么一定要使用 clone()。

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

1. 將 DOM 元素創建為對象（例如使用 createElement）。
2. 將 DOM 元素創建為 HTML（例如，使用 innerHTML 或 jQuery 的 html()）。

首先，如果任何一種方法對您來說更直觀或更容易編寫，我建議您直接這樣做。

否則使用后者的好處是，如果元素有很多子元素，它會更干凈。 例如，嘗試使用第一種方法創建一個包含 6 列的表格行，每列具有不同的類。 您的代碼將比使用第二種方法時長得多。

就性能而言，這是一個很好的指南http://andrew.hedges.name/experiments/innerhtml/但簡短的回答是在大多數情況下差異可以忽略不計。 一個很好的一般性能指南是： http : //www.artzstudio.com/2009/04/jquery-performance-rules/ 。 第 6 個技巧與 DOM 操作有關。

Answer 3

你可以試試這個：

 $("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

}); 

Answer 4

如果您已經有可用的 jQuery，請使用它。 如果您不想托管它，請使用 Google 的托管版本。 最終它總是調用原生的 javascript createElement 或 innerHTML 方法。 因此，如果我特別需要克隆頁面上的現有元素，我會使用 #2 和 #3。

Answer 5

克隆現有內容...

var $html = $template.clone();

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

因為克隆內容具有“DOM”屬性。 然后你可以改變這個標簽，屬性，值然后附加它..

Answer 6

您可以使用兩個 jQuery append()或prepend()方法向 DOM 添加或插入元素。 append()方法在匹配元素的末尾插入內容，而prepend()方法在匹配元素的開頭插入內容。

HTML代碼：

<button>Add item</button>
<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
</ul>

查詢代碼：

  $(document).ready(function(){
    $("button").click(function(){
      $("ul").append("<li>lorem ipsum</li>"); 
    });
  });

您可以在此處查看示例：如何在 jQuery 中添加 DOM 元素

Answer 7

如果您正在處理大量要重用的 HTML，那么我建議您查看： http : //api.jquery.com/jQuery.template/ ，這是最終版本，但會被更好的內容取代。

我在生產環境中使用它，它很棒，至於較小的html什么sp。 說是最好的方法

Answer 8

更簡潔的方法是使用 jQuery。

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