html文档对象 jq,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元素所在的文档。我们通常这么用$("

在没有把$("

举例说明：

var row01 = '

var row02 = $('

$(row01).append("这是row01-append进来的子元素");

$(row01).after("这是row01-after进来的子元素");

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

row02.append("这是row02-append进来的子元素");

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

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

console.info("row01里面的内容："+$(row01).html());

console.info("row02里面的内容："+row02.html());

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

dom结构：

输出结果：

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

那是为什么呢？

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

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

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

移到

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

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

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