总结一下jQuery操作节点的方法（创建、选择、插入节点）

版权声明：博客的原创文章，大家可以转载，但是一定要声明文章来源。谢谢。 https://blog.csdn.net/xinghuo0007/article/details/71437066

知识点一：创建节点

注意：Jquery创建元素节点、属性节点、文本节点都使用$(html) 1.创建元素节点：$("<li></li>"); 2.创建属性节点：$("<li id='test'></li>"); 3.创建文本节点：$("hello world !"); 4.下面是创建三者的结合：$("<li id='test'>hello world !</li>"); 解释：4是创建一个id属性为test，文本节点为hello world !的li节点 12345678

知识点二：获得节点

主要是jQuery的选择器：下面说下最基础的几个 选择器 格式 举例 1.id选择器 $("#id的属性值") $("#name"); 2.class选择器 $(".class的属性值") $(".name") 3.标签选择器 $("html标签") $("p") 4.*选择器 $("*") $("*") 5.群组选择器 $("选择器1,选择器二,...") $("p,#name") 1234567891011

知识点三：插入节点

内部插入（当做子节点插入）： append(content|fn) 向每个匹配的元素内部末尾追加内容。 appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合末尾。 prepend(content|fn) 向每个匹配的元素内部头部内容。 prependTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合头部 外部插入（当做兄弟节点插入）： after(content|fn) 向每个匹配元素的后面添加内容 before(content|fn) 向每个匹配元素的前面添加内容 insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后 面。 insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的 前面。 123456789101112

内部插入（当做子节点插入）案例：

<div id="div1"> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> </div> <p id="three">我是第三个p标签</p> <script> var p3 = $("#three"); var div = $("#div1"); </script> 123456789101112

1.append()实例

div.append(p3) 1

执行完，结果网页结果为：

<div id="div1"> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> </div> 12345

总结：

1.可以看出append()方法，可以将id=three的p标签添加进了div中 2.这是我们也发现，原来位置上的id=three的p标签会被删除，等于是实际上是移动div里 面去了，也就是说在使用append()的时候，如果被添加元素会被移动到要添加的元素里面 了。 1234

2.appendTo()实例：

p3.appendTo(div) 1

结果为：

<div id="div1"> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> </div> 12345

总结：

1.结果和append()执行完是一样的，只是颠倒了一下位置而已 1

3.prepend()实例：

div.prepend(p3); 1

结果为：

<div id="div1"> <p id="three">我是第三个p标签</p> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> </div> 12345

4.prependTo()实例：

p3.prependTo(div) 1

结果为：

<div id="div1"> <p id="three">我是第三个p标签</p> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> </div> 12345

外部插入（当做子节点插入）案例：

<div id="div1"> <p id="one">我是第一个p标签</p> </div> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> <script> var p1 = $("#one"); var div = $("#div1"); </script> 12345678910

1.after()

div.after(p1); 1

结果为；

<div id="div1"></div> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> 1234

总结：

1.第一个p标签插入到了div的后面 2.第一个p标签在div中的移除 3.插入的过程相当于将第一个p标签从div中移动到div的后面 123

2.

div.before(p1) ; 1

结果：

<p id="one">我是第一个p标签</p> <div id="div1"></div> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> 1234

3.insertAfter()案例：

p1.insertAfter(div); 1

结果：

<div id="div1"></div> <p id="one">我是第一个p标签</p> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> 1234

总结：

1。结果跟after()一样，只是颠倒了位置 1

4.insertBefore()案例：

p1.insertBefore(div); 1

结果：

<p id="one">我是第一个p标签</p> <div id="div1"></div> <p id="two">我是第二个p标签</p> <p id="three">我是第三个p标签</p> 1234

总结：

1。结果跟before()一样，只是颠倒了位置 1