使用 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')类似语法。 这很容易阅读、理解和维护。