[jQuery教程]DOM节点插入方法(五)
DOM 内部插入 append()与 appendTo()
动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么问题来了,怎么放到文档上?
这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery 就定义 2 个操作的方法
append:这个操作与对指定的元素执行原生的 appendChild 方法,将它们添加到文档中的情况类似。
appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把 B 追加到 A 中,而是把 A 追加到 B 中。
简单的总结就是:
.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同。
append()前面是被插入的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容,而后面是被插入的对象
DOM 外部插入 after()与 before()
节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里 jQuery 引入了 2 个方法,可以用来在匹配 I 的元素前后插入内容
选择器的描述:
- before 与 after 都是用来对相对选中元素外部增加相邻的兄弟节点
- 2 个方法都是都可以接收 HTML 字符串,DOM 元素,元素数组,或者 jQuery 对象,用来插入到集合中每个匹配元素的前面或者后面
- 2 个方法都支持多个参数传递 after(div1,div2,….) 可以参考右边案例代码
注意点:
- after 向元素的后边添加 html 代码,如果元素后面有元素了,那将后面的元素后移,然后将 html 代码插入
- before 向元素的前边添加 html 代码,如果元素前面有元素了,那将前面的元素前移,然后将 html 代码插
DOM 内部插入 prepend()与 prependTo()
在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过 append 与 appendTo 插入指定内容外,相应的还可以在被选元素之前插入,jQuery 提供的方法是 prepend 与 prependTo
选择器的描述:
prepend 与 prependTo 的使用及区别:
- .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
- .prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同
对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数; - 而.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。
这里总结下内部操作四个方法的区别:
- append()向每个匹配的元素内部追加内容;
- prepend()向每个匹配的元素内部前置内容;
- appendTo()把所有匹配的元素追加到另一个指定元素的集合中;
- prependTo()把所有匹配的元素前置到另一个指定的元素集合中;
DOM 外部插入 insertAfter()与 insertBefore()
与内部插入处理一样,jQuery 由于内容目标的位置不同,然增加了 2 个新的方法 insertAfter 与 insertBefore
- .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于 before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面;
- .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于 after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面;
- before、after 与 insertBefore。insertAfter 的除了目标与位置的不同外,后面的不支持多参数处理;
注意事项:
- insertAfter 将 JQuery 封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将 JQuery 对象插入;
- insertBefore 将 JQuery 封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将 JQuery 对象插入;
码云笔记 » [jQuery教程]DOM节点插入方法(五)
虽然现在有这么多框架,但是我觉得还是不能抹杀jQuery的功劳
恩, 在没有现在这么多框架的时候,好多人都在利用jQuery做开发,即使现在有这么多框架出来了,还是会用到jQuery