[jQuery教程]DOM节点插入方法(五)

目录
文章目录隐藏
  1. DOM 内部插入 append()与 appendTo()
  2. DOM 外部插入 after()与 before()
  3. DOM 内部插入 prepend()与 prependTo()
  4. DOM 外部插入 insertAfter()与 insertBefore()

[jQuery 教程]DOM 节点插入方法(五)

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

动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么问题来了,怎么放到文档上?

这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery 就定义 2 个操作的方法

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

append:这个操作与对指定的元素执行原生的 appendChild 方法,将它们添加到文档中的情况类似。

appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把 B 追加到 A 中,而是把 A 追加到 B 中。

简单的总结就是:

.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同。

append()前面是被插入的对象,后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容,而后面是被插入的对象

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

节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里 jQuery 引入了 2 个方法,可以用来在匹配 I 的元素前后插入内容

选择器的描述:

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

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

注意点:

  • after 向元素的后边添加 html 代码,如果元素后面有元素了,那将后面的元素后移,然后将 html 代码插入
  • before 向元素的前边添加 html 代码,如果元素前面有元素了,那将前面的元素前移,然后将 html 代码插

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

在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过 append 与 appendTo 插入指定内容外,相应的还可以在被选元素之前插入,jQuery 提供的方法是 prepend 与 prependTo

选择器的描述:

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

prepend 与 prependTo 的使用及区别:

  1. .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
  2. .prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同
    对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数;
  3. 而.prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。

这里总结下内部操作四个方法的区别:

  1. append()向每个匹配的元素内部追加内容;
  2. prepend()向每个匹配的元素内部前置内容;
  3. appendTo()把所有匹配的元素追加到另一个指定元素的集合中;
  4. prependTo()把所有匹配的元素前置到另一个指定的元素集合中;

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

与内部插入处理一样,jQuery 由于内容目标的位置不同,然增加了 2 个新的方法 insertAfter 与 insertBefore

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

  • .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于 before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面;
  • .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于 after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面;
  • before、after 与 insertBefore。insertAfter 的除了目标与位置的不同外,后面的不支持多参数处理;

注意事项:

  • insertAfter 将 JQuery 封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将 JQuery 对象插入;
  • insertBefore 将 JQuery 封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将 JQuery 对象插入;

「点点赞赏,手留余香」

5

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [jQuery教程]DOM节点插入方法(五)

2 评论

  1. 虽然现在有这么多框架,但是我觉得还是不能抹杀jQuery的功劳

    1. 恩, 在没有现在这么多框架的时候,好多人都在利用jQuery做开发,即使现在有这么多框架出来了,还是会用到jQuery

回复 码云 取消回复