插入用jquery创建的元素和直接插入字符串的区别?

Question

( function() {
    var $div = $( '<div></div>' ).html( '我是jquery创建的' );
    var div = '<div>我是字符串</div>';

    $( 'body' ).append( $div);
    $( 'body' ).append( div );
} )()

试了一下, 结果都是一样.

对于动态插入元素到页面中, 这两种方式有什么本质上的区别?
哪一种方案更好?

Answer 1

刚才试着写了下，觉得逐句解释有点墨迹。。
我就摘重点来说吧（针对区别）：

var $div = $( '<div></div>' ).html( '我是jquery创建的' );
$( 'body' ).append( $div);

第一句：
先要createElement一个div的element对象，再传给jQuery返回一个jQuery对象；
.html()是要先清空其内的所有内容，然后再向其内填充参数中的内容（即那段字符串）；
第二句：
.append($div)这句，.append()会先判断参数是否为jQuery对象，然后将其追加 .前面的对象中（这里忽略无关题意的细节）

var div = '<div>我是字符串</div>';
$( 'body' ).append( div );

第一句：
只是创建一段字符串而已，然后赋值给div；
第二句：
.append(div)，跟上面说的一样，会先判断这个div是否为jQuery对象，如果不是，先转为jQuery对象。所以这里也就类似之前那种情况中的第一句：createElement一个div的element对象，再传给jQuery返回一个jQuery对象。然后就跟第一种第二句后边一样了。

总结一下：
两种区别就是

1. 生成element的时机不同；

2. 效率上，第一种比第二种多了清空和插入内容的步骤。

建议：
$( '<div></div>' ).html(...)一般不会这么用，如果element对象是当前域中动态创建的，那么一般都会像第二种方式来创建。一般.html(...)这种情况，.之前是获取页面中已存在的element。

希望可以帮到你 :P

Answer 2

只是这样用的话没什么区别，因为append都支持。
个人感觉，第一种可以生成一个jquery 的对象，用来操作刚刚创建的dom元素，而第二种就不能。
有区别的地方也是在这里。先创建一个dom元素，再修改它的属性，某些属性会导致回流（比如修改高度等）。
那么好的方式就是先创建，在修改，最后插入，只需要一次回流。而不要先插入，再修改属性（第二种就只能先插入，再通过jquery获取他，然后修改）。
个人感觉，不一定对。