使用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());

我很想听听别人对此的看法。

(此外，这似乎是一个好的“社区Wiki”候选者，但我对它们不太熟悉。请有经验的人给予评论并让我知道是否应该使用。谢谢)

- sdr

---

т«ЃТў» innerHTML УђїСИЇТў» innerHtmlсђѓ - Tim Down

两年后 :) - Tim Down

迟做总比不做好，对吧？...对吧？ :) - sdr

Answer 1

如果你正在使用jQuery 1.4，最好的方法如下：

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

- sp.

---

@sp，如何链接以完成<tr>示例？（不是批评，只是不知道如何处理嵌套元素。） - user113716

这将创建tr元素，添加td元素，并将其附加到容器中。 - sp.

那段代码是如何创建tr，添加td并将其附加到容器中的？看起来你只是在向body元素添加一个链接！ - richard

这似乎是官方文档。这里是链接。 - Jesse Glick

Answer 2

如果您已经有一个要复制的模板元素，那么请务必使用clone()。

但是，如果您想从头创建一个元素，则基本上有两种方法，我认为您已经提到了：

1. 以对象的形式创建DOM元素（例如使用createElement）。 2. 以HTML的形式创建DOM元素（例如使用innerHTML或jQuery的html()）。

首先，如果其中任何一种方法对您来说更直观或更容易编写，我建议您就采用该方法。

否则，使用后者的好处在于，如果元素有许多子元素，则更加清晰。例如，尝试使用第一种方法创建一个具有6个不同类的列的表行。您的代码将比使用第二种方法更长。

就性能而言，这是一份好的指南http://andrew.hedges.name/experiments/innerhtml/，但简短的答案是，在大多数情况下，差异是相当微不足道的。总体而言，性能方面的好指南也包括：http://www.artzstudio.com/2009/04/jquery-performance-rules/。第6个提示与DOM操作有关。

- jhchen

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

}); 

- Re_p1ay

Answer 4

你可以使用两个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>

JQuery 代码：

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

你可以在这里看到一个例子：如何在jQuery中添加DOM元素

- thomas

Answer 5

如果您已经有jQuery可用，请使用它。如果您不想托管它，请使用Google提供的托管版本。最终，它总是调用本地JavaScript createElement或innerHTML方法。因此，我会使用#2，并且如果我需要克隆页面上现有元素，则使用#3。

- Mike Sherov

Answer 6

克隆现有内容...

var $html = $template.clone();

 $html.find(''); ///更改内容后...  

由于克隆的内容具有'DOM'属性，因此您可以更改这些标签、属性和值，然后将其附加。

- pradeep

Answer 7

如果你正在处理大量需要重复使用的HTML，我建议你看一下http://api.jquery.com/jQuery.template/，这是一个不错的选择，但将会被更好的东西所替代。

我在生产环境中使用它非常好，对于小块的HTML，sp.提到的方法是最好的。

- Clarence Liu

---

这是一个404错误；你是指http://codepb.github.io/jquery-template/还是其他什么？ - Jesse Glick

这是一个已经停用的插件，虽然最初是官方的，但现在有更好的解决方案，例如mustache.js等。 - Clarence Liu

Answer 8

更加简洁的方法是使用jQuery。

像$('tr').addClass('myClass')这样的语法。这种方式易于阅读、理解和维护。

- Teja Kantamneni

---

这与帖子完全无关。 - ryandawkins