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（）。

但是如果你想从头开始创建一个元素，那么基本上我认为你提到了两种方法：

将DOM元素创建为对象（例如，使用createElement）。
将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

如果您已经有jQuery，请使用它。如果您不想托管它，请使用Google的托管版本。最后总是调用本机javascript createElement或innerHTML方法。所以如果我特意必须克隆页面上的现有元素，我会使用＃2和＃3。

Answer 4

如果你正在使用大量的HTML，那么我建议你看一下：http://api.jquery.com/jQuery.template/这是最终的，但会被更好的东西取代。

我在生产环境中使用它，它很棒，对于较小的html片段来说是什么sp。说是最好的方式

Answer 5

克隆现有内容...

var $html = $template.clone();

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

由于克隆内容与“＆＃39; DOM＆＃39;属性。然后你可以改变这个标签，属性，值然后追加它..

Answer 6

您可以尝试以下方法：

 $("<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 7

您可以使用两个 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>"); 
    });
  });

您可以在此处查看示例：How to add DOM element in jQuery

Answer 8

更简洁的方法是使用jQuery。

$('tr').addClass('myClass')就像语法一样。这很容易阅读，理解和维护。

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

8 个答案: