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

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

1   .after(content)在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点

2   .before(content)据参数设定,在匹配元素的前面插入内容

3   .after()和.before()共同点

都是用来对相对选中元素外部增加相邻的兄弟节点

都可以接收HTML字符串、DOM元素、元素数组,或者JQuery对象,用来插入到集合中每个匹配元素的前面或者后面

都支持多个参数传递after(div1,div2,...)

4   .after()和.before()不同

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

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

5   prepend向每个匹配的元素内部前置内容

6   prependTo把所有匹配的元素前置到另一个指定的元素集合中

7    .prepend()和.prependTo()的区别

.prepend()将指定元素插入到匹配元素里面作为他的第一个子元素(如果要作为最后一个子元素插入用.append())

.prepend()和.prependTo()语法、插入的内容和目标的位置不同

.prepend()选择器表达是写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数

.prependTo()正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数

8   .prepend()和.prependTo()实现同样的功能,都是在被选元素之前插入

9   insertBefore在目标元素前面插入集合中每个匹配的元素

10   insertAfter在目标元素后面插入集合中每个匹配的元素

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

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

13   .before()和.insertBefore()实现同样的功能

14   .before()和.insertBefore()的区别

主要是语法、内容和目标的位置不同

.before()选择表达式在函数前面,内容作为参数

.insertBefore()刚好相反,内容在方法前面,被放在参数里元素的前面

15   .after()和.insertAfter()实现相同的功能

16   .after()和.insertAfter()的区别

主要是语法、特别是(插入)内容和目标的位置不同

.after()选择表达式在函数的前面,参数是将要插入的内容

.insertAfter()刚好相反,内容在方法前面,被放在参数里元素的后面

时间: 2024-07-29 02:34:28

DOM—外部插入.after()、.before()、.insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo()的相关文章

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

DOM外部插入insertAfter()与insertBefore() 与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore .before()和.insertBefore()实现同样的功能.主要的区别是语法--内容和目标的位置. 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同

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

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

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

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

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

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

JS监控DOM的事件(内部插入、移除、修改属性等)!爽!

这可不是简单的 onclick.onchange,你对 DOM 进行内部插入.移除.属性修改等均会触发相应事件. DOM 事件列表: DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DOMElementNameChanged DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtree

DOM——创建节点及节点属性与内部插入append()和appendTo()

创建节点及节点属性与内部插入append()和appendTo() 1   创建流程 创建节点(常见的元素.属性和文本) 添加节点的一些属性 加入到文档中 2   流程中涉及的方法 创建元素document,creat 设置属性setAttrilbute 添加文本innerHTML 加入文档appendChild 3   创建节点时注意:每一个元素节点都必须单独创建,节点是属性需要单独设置,而且设置的接口不是很统一,添加到指定的元素位置不灵活,浏览器兼容问题处理 4   创建元素节点常见的是直接

DMO节点内部插入的常用方法与区别

1.DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法. 选择器 描述 append() 向每个匹配的元素内部追加内容或追加子节点 appendTo() 把所有匹配的元素追加到另一个指定的元素集合中 append:这个操作与对指定的元素执