文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

---- 一、示例HTML 这是divTwo <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

99420

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

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

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

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

94810

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()：在现存元素的外部，从前面插入元素

8.7K40

Jquery基本用法总结

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

66790

学习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') $('你好') 复制代码 其余设计思想，请看阮一峰老师的博客：jQuery...，那么这个方法可以把div移到p后面 $('p').after($('div')) 也可以实现这个操作 它们的不同就是返回的元素不一样，第一种返回的是div，第二种是p 同样地，在增操作里的所有API都可以实现这样的移动功能

78230

看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.5K90

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

3K50

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()，所以可以直接使用。

1.6K10

HTML5 drag和drop的亲手实践

draggable属性: 如果你想让一个元素变得可以拖曳的话，那么你就必须设置它的draggable=true，如下 这样，该元素就可以拖动了 ondragstart: 当元素开始被拖动时，触发该事件，目标对象是被拖动的元素 ondragover: 当被拖动元素在悬挂元素上移动的时候,该事件触发。...event.preventDefault: 当触发ondragover事件的时候，必须使用event.preventDefault(),否则的话，ondrop事件就不会触发 event.dataTransfer.effectAllowed...插入节点的方法 将节点插入到另一个节点前面，代码如下 function insertBefore(insertNode, node) { node.parentNode.insertBefore...// 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。

91430
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券