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

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对象插入；
时间： 2024-08-24 10:39:23

DOM外部插入insertAfter()与insertBefore()的相关文章

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

DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容 选择器的描述: before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或

DOM—外部插入.after()、.before()、.insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo()

外部插入.after()..before()..insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo() 1   .after(content)在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 2   .before(content)据参数设定,在匹配元素的前面插入内容 3   .after()和.before()共同点 都是用来对相对选中元素外部增加相邻的兄弟节点 都可以接收HTML字符串.DOM元素.元素数组,或者J

DOM常用外部插入方法与区别

1.DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容. 选择器 描述 .after(content) 在匹配选择器的每个元素之后插入内容(作为兄弟节点) .before(content) 方法在匹配选择器的元素之前插入内容(作为兄弟节点) before与a

jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法

这个方法跟prependTo()和appendTo()不一样的地方在于,一个是仍然插入到元素内部,而insertAfter和insertBefore是插入到元素外部. 这里拿insertBefore来作为例子说一下: 使用方法: 第一种方法:插入代码: <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <s

jquery内部插入与外部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>文档处理</title> <script src="jquery-3.4.1.js"></script></head

dom的插入，移除，克隆

/* dom的插入,移除,克隆 domo('dom0').clone() */ !(function (w) { w.domoperation = function (id) { var _class = new dom(); _class.init(id); return _class; }; w.dom = function () { }; w.dom.prototype = { getid: function (id) { return document.getElementById(id

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

DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法

16.外部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>02_外部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script ty

插入前置节点insertBefore()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con