文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

jQuery源码解析之after()insertAfter()before()prepend()的实现

---- 一、示例HTML jQuery.js"> div id="divTwo"> 这是divTwo div> div id="divOne...after($("#divTwo")) 源码： //在被选元素之后插入指定的内容（不是内部） //会移动已有节点到指定位置 //http://www.runoob.com/jquery...(elem, a.firstElementChild ) //在a的第一个child之前插入elem //由父节点调用insertBefore，在目标节点的后一节点...}, 解析： 可以看到，在经历了 domManip 的洗礼后，返回符合规范的 elem 即待插入元素， 然后 this 表示 selector ， 在 this 的父节点存在的情况下调用 this.parentNode.insertBefore...( divOne, divTwo ); before() 其实是调用了 原生 insertBefore() 方法，也就是在 selector 的父节点的内部，在 divTwo 前插入 divOne

1.4K20

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

之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容。...()与insertBefore() 与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore 选择器 描述 insertAfter()...对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面 .after()和.insertAfter() 实现同样的功能...对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面 before、after与insertBefore。...添加元素 点击通过jQuery的insertBefore添加元素 点击通过jQuery的insertAfter

85610
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    JQuery干货篇之操控DOM

    ，不使用clone方法，那么就会将这段内容移动，因此这里使用clone会很方便，详细请看append的用法实例 实例： 1 $("div.dcell").clone(); //这里的clone...方法必须是JQuery对象调用 使用DOM API创建新元素 DOM API是用js操作的，其实jquery在幕后悄悄的调用DOM API 实例： var divElem=document.createElement...().insertBefore("#row2 div.dcell"); insertAfter 和append用法差不多，只是参数是要插入的目标位置，这里的也是作为兄弟元素插入的 实例： 1...orchildElems.insertAfter("#row1 div.dcell"); wrap 在集合中匹配的每个元素周围包裹一个HTML结构，将会作为父元素存在。...border",'thick double red'); $("div.drow").wrap(div); //在drow外层添加了一个div将作为父元素，可以看到现在的源代码变成了div

    1.4K10

    jQuery基本操作

    也提供了在DOM树上的移动方法： (‘div’).next(‘p’); //选择div元素后面的第一个p元素 　　(‘div’).parent(); //选择div元素的父元素 　　(‘div’).closest...第一种方法是使用​.insertAfter()​，把div元素移动​p​元素后面： (‘div’).insertAfter((‘p’)); 第二种方法是使用​.after()​，把​p​元素加到​div​...第一种方法返回​div​元素，第二种方法返回​p​元素。你可以根据需要，选择到底使用哪一种方法。...使用这种模式的操作方法，一共有四对： ​.insertAfter()​和​.after()​： 在现存元素的外部，从后面插入元素 ​.insertBefore()​和​.before()​： 在现存元素的外部...复制元素使用​.clone()​。 删除元素使用​.remove()​和​.detach()​。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

    49710

    jquery 元素节点操作 - 创建节点、插入节点、删除节点

    jquery的节点操作说明 前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作，这种直接使用字符串创建的方式也是性能最高的。...在这里面可以看到，首先使用$('div').html()得到原来的内部元素字符串，然后再拼接其他br和span元素字符串，再赋值回$('div').html()内，这样就可以根据字符串操作好元素了。...，从后面插入元素 prepend() prependTo() #在现存元素的内部，从前面插入元素 after() insertAfter() #在现存元素的外部，从后面插入元素 before() insertBefore...是否会批量直接剪切过来，还是要使用each()方法遍历一遍？ ? 直接就可以整体剪切过来。...var $p = $('这是一个p标签'); $p.insertAfter($('div')); 4、before()和insertBefore()：在现存元素的外部，从前面插入元素

    10.4K40

    Jquery基本用法总结

    第一种方法是使用.insertAfter()，把div元素移动p元素后面： $('div').insertAfter('p'); 第二种方法是使用.after()，把p元素加到div元素前面： $('p...第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。...使用这种模式的操作方法，一共有四对： .insertAfter()和.after()：在现存元素的外部，从后面插入元素 .insertBefore()和.before()：在现存元素的外部，从前面插入元素....appendTo()和.append()：在现存元素的内部，从后面插入元素 .prependTo()和.prepend()：在现存元素的内部，从前面插入元素 删除元素使用.remove()和.detach...两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。 清空元素内容（但是不删除该元素）使用.empty()。

    91290

    学习jQuery设计思想有感

    就不会死，因为这个函数在访问elements，被访问的东西是不能随便删掉的 链式调用 （以下jQuery()均写为$） 上述代码中是通过addClass的return this(这个this就是api...$('div').find('h3').eq(2).html('Hello'); //找到所有的div元素，在div元素了找到h3标签，选择第三个h3标签，替换文本内容 复制代码 可以看到，这样连起来调用的方式就称为链式调用...，它在下次调用函数时，新的函数包含了上一个函数返回的值，所以它可以把不同的操作连在一起 不仅如此，jQuery还提供了一个end方法，使得结果集可以返回上一步 　　$('div') 　　　.find(...如，$()的参数不能可以是选择器，还可以是html标签等 $('.red') $('div>你好div>') 复制代码 其余设计思想，请看阮一峰老师的博客：jQuery...，那么这个方法可以把div移到p后面 $('p').after($('div')) 也可以实现这个操作 它们的不同就是返回的元素不一样，第一种返回的是div，第二种是p 同样地，在增操作里的所有API都可以实现这样的移动功能

    1K30

    看Zepto如何实现增删改查DOM

    参考自zeptojs_api append,appendTo,prepend,prependTo都是在元素内部插入内容，而after,insertAfter,before,insertBefore则是在元素外部插入内容...append,appendTo是在元素的末尾插入内容，prepend,prependTo是在元素的初始位置插入，after,insertAfter是在元素的后面插入内容，before,insertBefore...因为其两两对应的方法本质上是同样的功能，只是在使用上有点相反的意思，所以简单的反向调用一下就可以了。 html 获取或设置对象集合中元素的HTML内容。...当没有给定content参数时，返回当前对象集合中第一个元素的文本内容（包含子节点中的文本内容）。当给定content参数时，使用它替换对象集合中所有元素的文本内容。...嘿嘿可以看到，ul原来的结构不见了，被移动到了第一个wrap的第一个子节点here中。

    2.9K90

    JavaWeb——JQuery之DOM操作应用及实践案例总结（DOM内容操作、DOM属性操作、CRUD操作）

    /js/jquery-3.3.1.min.js"> $(function () { // 获取myinput 的value...removeAttr()：删除属性 3）prop()：获取/设置元素的属性值 4）removeProp()：删除属性 【注意】：prop和attr的区别，如果操作的是元素的固有属性（非自定义的），建议使用.../js/jquery-3.3.1.min.js"> $(function () {...，将对象B添加到A的内部，且在开头； 3）appendTo()：如A.append(B)，将对象A添加到B的内部，且在末尾； 4）prependTo()：如A.append(B)，将对象A添加到B的内部...A的前面，对象A和B是平级的； 7）insertAfter()：如A.insertAfter(B)，将对象B添加到A的后面，对象A和B是平级的； 8）insertBefore()：如A.insertBefore

    3.5K50

    jquery 使用方法

    5 $('div').eq(5); //选择第6个div元素 有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： 1 $('div').next(...第一种方法是使用.insertAfter()，把div元素移动p元素后面： $('div').insertAfter('p'); 第二种方法是使用.after()，把p元素加到div元素前面： $('...使用这种模式的操作方法，一共有四对 1 .insertAfter()和.after()：在现存元素的外部，从后面插入元素 2 .insertBefore()和.before()：在现存元素的外部，从前面插入元素...删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。

    2.2K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券