在使用Jquery移动<div>s时，insertAfter()可以工作，但insertBefore()不能

在使用Jquery移动<div>时，insertAfter()方法可以将选定的元素插入到目标元素的后面，而insertBefore()方法则是将选定的元素插入到目标元素的前面。

insertAfter()方法的语法是：$(selector).insertAfter(target)，其中selector是要插入的元素，target是目标元素。该方法会将selector插入到target元素的后面。

insertBefore()方法的语法是：$(selector).insertBefore(target)，其中selector是要插入的元素，target是目标元素。该方法会将selector插入到target元素的前面。

可能出现insertBefore()方法无法工作的原因有：

目标元素不存在或选择器选择不到目标元素，导致无法插入。
页面结构错误或代码有误，导致插入位置计算错误。
Jquery版本不兼容或未正确引入Jquery库。

建议的解决方法：

确保目标元素存在且选择器能够正确选择到目标元素。
检查页面结构和代码逻辑，确保插入位置计算正确。
确认Jquery库已正确引入，并且版本兼容。

推荐的腾讯云相关产品：腾讯云服务器（CVM）

腾讯云服务器（CVM）是一种弹性计算产品，提供了可扩展的虚拟机实例，可满足不同规模的计算需求。您可以在云服务器上部署各种应用程序和服务，并根据业务需求灵活调整计算资源。

产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关·内容

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

1K2 0

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

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

6521 0

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

9741 0

jQuery（操作Dom-节点操作①）

("ul").after($div); } 节点对象.insertAfter(selector)：将"节点对象"插入到selector1后面 function after(){ var $div = $...("ul后的div"); $div.insertAfter($("ul")); } 在指定节点前面插入节点 selector.befor(节点对象)：在selector前面插入"节点对象...$("p").remove(); $("ul").before($p); } 注意：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。...但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。...对象中删除，因而可以在将来再使用这些匹配的元素。

1.4K2 0

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()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

851 0

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.9K4 0

22-jQuery深入

对象1和对象2是兄弟关系 insertAfter() 对象1.insertAfter(对象2):将对象2添加到对象1后边。...对象1和对象2是兄弟关系 insertBefore() 对象1.insertBefore(对象2)∶将对象2添加到对象1前边。...src="js/jquery-3.5.1.min.js"> /** * show,hide,taggle都可以接收三个参数...可以省略 * 第三个参数表示执行函数，函数会在动画时执行，每个元素执行一次 */ //利用hide函数隐藏元素 function hideFunc...，此时可以通过this获取对象，但不能获取索引值 alert(index+":"+$(element).html()); }); //第二种方式

1.1K2 0

Jquery基本用法总结

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

6939 0

学习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都可以实现这样的移动功能

8013 0

一文入门jQuery

案例全选和全不选 QQ表情选择多选下拉框左右移动 jQuery概念一个JavaScript框架。简化JS开发。...因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。...如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。...程序加载更快导入JQuery的js文件：导入min.js文件使用 var div1 = $(“#div1”); alert(div1.html()); JQuery对象和JS对象区别与转换 JQuery...对象在操作时，更加方便。

3.5K2 0

jQery基础操作

").html();//获取 //或 $("div.left").html("…")//设置 text() 举例 $("div.left").text...或 $(this).val(value);//设置节点及节点属性操作创建节点语法 $(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html...)：使用HTML字符串创建jQuery节点举例 var $newNode=$(""); var $newNode1=$("你喜欢哪些冬季运动项目？...replaceWith($newNode1); $($newNode1).replaceAll(".gameList li:eq(2)"); replaceWith() 与replaceAll() 方法都可以实现元素节点的替换...function(){ $(this).clone(false).appendTo(".gameList"); }) 参数ture或flase, true复制事件处理，flase时反之

3201 0

前端-part9-jQuery操作样式二：元素追加+事件冒泡

(B); // 把 A 放到 B 的后面 4.添加到指定元素外部的前面 $(A).before(B); // 把 B 放到 A 的前面 $(A).insertBefore(B); // 把 A...放到 B 的前面 5.移除和清空元素 remove() // 从 DOM 中删除所有匹配的元素 empty() // 删除匹配的元素集合中所有的子节点 6.关于登录时验证用户名或者密码不能为空的例子 <...= $(tmp).parent().text().trim().slice(0, -1); $(tmp).next().text(s + "不能为空").css("color...id="grandfather"> 儿子 $("#grandfather").click( function()

1.8K3 0

JQuery高级

，在查找到东西的时候，都用变量存一下，方便后期使用。...jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。其实$是jQuery中的一个函数。...js里面命名的时候可以是数字、字母、下划线或者美元符号。是没有问题的。在工作中写代码的时候，每一个功能实现的时候要加注释，方便协同工作，养成良好的习惯。...(目的地) prepend()向前面加 prependTo(目的地) 父级加： after()在同级的后面加 insertAfter(目的地)在同级的后面加 before()在同级别的前面加 insertBefore...= $('divdiv') // $('ul').after( $div ) // $div.insertAfter( $('ul

1.5K5 0

看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.5K9 0

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.1K5 0

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.6K1 0

JQuery语法：查找+操作

jquery的基础语法：$(selector).action() 即查找元素.操作一、查找元素（选择器和筛选器） 1.1 选择器 1.1.1 基本选择器 $("*")...Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter...(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore...outerHeight([soptions]) $("").outerWidth([options]) 三、事件页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数...function(){}) -----------> $(function(){}) 事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数

9986 0

【JQuery框架】超详细DOM操作看这一篇就够了！

() 8. insertBefore() 9. remove() 10. empty() ---- 写在前面 Hello，你好呀！...之前和大家分享了jQuery框架中选择器的相关操作“【JQuery框架】五大选择器“全家桶”详解！！！”...一、内容操作在进行内容操作时，对于设置和获取元素的内容使用同一个函数进行操作，设置元素内容时直接在函数中传入参数即可。...对象1和对象2是兄弟关系 7. insertAfter() 样例：对象1.insertAfter(对象2)：将对象1添加到对象2后边。...对象1和对象2是兄弟关系 8. insertBefore() 样例：对象1.insertBefore(对象2)：将对象1添加到对象2前边。

5365 0

JQuery-学习笔记03【基础——DOM操作】「建议收藏」

如果操作的是元素的固有属性，则建议使用prop 2. 如果操作的是元素自定义的属性，则建议使用attr 2....如果操作的是元素的固有属性，则建议使用prop 2. 如果操作的是元素自定义的属性，则建议使用attr 2....对象1和对象2是兄弟关系 07. insertAfter() * 对象1.insertAfter(对象2)：将对象2添加到对象1后边。...对象1和对象2是兄弟关系 08. insertBefore() * 对象1.insertBefore(对象2)：将对象2添加到对象1前边。....click(function() { //before //$("#tj").before($("#fk")); //insertBefore $("#fk").insertBefore($("#tj

1.9K1 0

jQuery基础

如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); $("#test").html() 意思是指：获取ID...虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错约定：如果获取的是 jQuery...//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。...(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore...用来在jQuery命名空间上增加新函数。

2.1K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云