jquery .html（）vs .append（） [英] jquery .html() vs .append()

问题描述

可以说我有一个空的div：

 < div id ='myDiv'>< / div> 
  

是这样的：

  $（'＃myDiv'）。html（< div id ='mySecondDiv'>< / div>）; 
  

相同：

  var mySecondDiv = $（< div id ='mySecondDiv'>< / div>）; 
 $（'＃myDiv'）。append（mySecondDiv）; 
  

解决方案

每当您将一串HTML传递给任何jQuery方法，这是发生了什么：

创建一个临时元素，我们称它为x。 x的 innerHTML 被设置为您传递的HTML字符串。然后，jQuery会将每个生成的节点（即，x的 childNodes ）转移到新创建的文档片段中，然后将其下次缓存。然后它将返回片段的 childNodes 作为新的DOM集合。

请注意，它实际上比这更复杂，因为jQuery执行了一系列跨浏览器检查和各种其他优化。例如。如果你只传递< div>< / div> 到 jQuery（）只需做 document.createElement（'div'）。

编辑： jQuery执行的绝对数量的检查，请看 here a>，此处和 here 。

---

innerHTML 通常是更快的方法，但不要让它支配你所做的一切时间。 jQuery的方法并不像 element.innerHTML = ... 那么简单 - 正如我所提到的，发生了一系列检查和优化。

---

正确的技术在很大程度上取决于情况。如果你想创建大量相同的元素，那么你想要做的最后一件事是创建一个巨大的循环，在每次迭代中创建一个新的jQuery对象。例如。使用jQuery创建100个div的最快捷方式：

  jQuery（Array（101）.join（'< div>< / DIV>'））; 
  

---

还有可读性和维护的问题。

  $（'< div id ='+ someID +'class =foobar>'+ content +'< / div>'）; 
  

...很难保持： p>

  $（'< div />'，{
 id：someID，
 className：'foobar '，
 html：content 
}）; 
  

Lets say I have an empty div:

<div id='myDiv'></div>

Is this:

$('#myDiv').html("<div id='mySecondDiv'></div>");

The same as:

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

解决方案

Whenever you pass a string of HTML to any of jQuery's methods, this is what happens:

A temporary element is created, let's call it x. x's innerHTML is set to the string of HTML that you've passed. Then jQuery will transfer each of the produced nodes (that is, x's childNodes) over to a newly created document fragment, which it will then cache for next time. It will then return the fragment's childNodes as a fresh DOM collection.

Note that it's actually a lot more complicated than that, as jQuery does a bunch of cross-browser checks and various other optimisations. E.g. if you pass just <div></div> to jQuery(), jQuery will take a shortcut and simply do document.createElement('div').

EDIT: To see the sheer quantity of checks that jQuery performs, have a look here, here and here.

---

innerHTML is generally the faster approach, although don't let that govern what you do all the time. jQuery's approach isn't quite as simple as element.innerHTML = ... -- as I mentioned, there are a bunch of checks and optimisations occurring.

---

The correct technique depends heavily on the situation. If you want to create a large number of identical elements, then the last thing you want to do is create a massive loop, creating a new jQuery object on every iteration. E.g. the quickest way to create 100 divs with jQuery:

jQuery(Array(101).join('<div></div>'));

---

There are also issues of readability and maintenance to take into account.

This:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... is a lot harder to maintain than this:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

这篇关于jquery .html（）vs .append（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！