jQuery(html,[ownerDocument])创建jquery对象时易忽视的写法

最近写js时发现了jquery对象一个有趣的地方。就是通过$(html,[ownerDocument])来创建的jquery对象时出现了问题，经过查看文档和其他资料总结出来分享给大家，权当积累经验了。

用$(html,[ownerDocument])创建的jquery对象

w3school上介绍，jQuery() 函数有三种语法：1、接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器；如：$(".class"),$("#id")等。

2、使用原始 HTML 的字符串来创建 DOM 元素，这是我这里要说的重点了。

3、绑定一个在 DOM 文档载入完成后执行的函数。

首先说一下$(html,[ownerDocument])创建新的元素，w3school给出的解释是：

html就是用于动态创建DOM元素的HTML标记字符串，ownerDocument是创建DOM元素所在的文档。我们通常这么用$("<div></div>")，来生成一个jquery对象。$()函数是一个jquery对象的制造工厂，用法很灵活。然而，当我们$("<div></div>")或通过给$()传入参数的方式创建jquery对象再调用jquery的方法时，就像这么用$("<div></div>").append();$("<div></div>").after();

在没有把$("<div></div>")动态创建的jquery对象追加到body文档流中时，这样做是不起作用的。而且$("<div></div>")或通过给$()传入参数的方式创建jquery对象，这两者还是有区别的。

举例说明：

<div class="wrap">

</div>

<script>
    var row01 = '<div class="row01"></div>';
    var row02 = $('<div class="row02"></div>');

    $(row01).append("<span>这是row01-append进来的子元素</span>");
    $(row01).after("<span>这是row01-after进来的子元素</span>");
    $(row01).appendTo($(".wrap"));

    row02.append("<span>这是row02-append进来的子元素</span>");
    row02.after("<span>这是row02-after进来的子元素</span>");
    row02.appendTo($(".wrap"));

    console.info("row01里面的内容："+$(row01).html());
    console.info("row02里面的内容："+row02.html());
</script>

知道dom结构和输出的结果是什么吗？

dom结构：

输出结果：

很明显row01和row02都添加到目标区域，但是row01的append()和after()方法都没起作用，页面节点里面是空字符串，而row02里面有内容，它的两个方法只有append起作用了。

那是为什么呢？

首先row01，它是$()通过传入一个定义好的包含html片段参数创建的对象，在没有添加到目标区域时它是动态的对象，并不存在document中，虽然它已经是jquery对象了但是并不能执行jquery方法。

row02刚开始就定义好了一个jquery对象并把它存入栈，已经在当前文档流里面了，在没有追加到document之前，它只是位置不确定，它的子元素它自己是知道的，所以往自身内部追加元素是可以的，而在其外面追加元素是不起作用的。其实当把

row02.after("<span>这是row02-after进来的子元素</span>");

移到

row02.appendTo($(".wrap"));

的后面，row02先添加到document当中再追加内容，就起作用了。

所以，建议以后写jquery代码时，最好先定义好jquery对象再调用。