jQuery基础(二)—DOM篇——节点的创建与插入

1、创建元素节点：

常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")

$("

动态创建DIV元素节点

")
这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活

http://js.jirengu.com/maniqeyeve/1/

2、DOM内部插入append()与appendTo()

Paste_Image.png

append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象
http://js.jirengu.com/gaparigasi/1/

3、DOM外部插入after()与before()

Paste_Image.png

before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点：
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入

http://js.jirengu.com/vecumineti/1/

4、DOM内部插入prepend()与prependTo()

Paste_Image.png

这里总结下内部操作四个方法的区别：
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中
http://js.jirengu.com/piqogemula/1/

5、DOM外部插入insertAfter()与insertBefore()

Paste_Image.png

注意事项：
insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
http://js.jirengu.com/lasinilopo/1/