jQuery——插入元素节点的方法

.insertAfter()与after（）

作用：将A添加到B后面 —— A.insertAfter( ' B ' ) / B.after( ' A ' )

【例】点击长条，添加到盒子中第二个长条的下面，代码效果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {border: 2px solid black;padding: 20px;width: 300px;margin: 30px 0 0 30px;}.box {width: 280px;height: 40px;margin: 0 auto;margin-bottom: 3px;border-radius: 20px;}.pos {margin-left: 62px;margin-top: 5px;}.c1 {background: linear-gradient(to right, cadetblue, steelblue);}.c2 {background: linear-gradient(to right, teal, lightblue);}.c3 {background: linear-gradient(to right, pink, plum);}</style>
</head>
<body><div class="wrapper"><div class="box c1"></div><div class="box c2"></div></div><div class="box c3 pos"></div>
</body><script src="./jquery.js"></script><script>$('.c3').click(function (index) {$(this).removeClass('pos');$(this).insertAfter('.c1');// $('.c1').after(this);})</script>
</html>

.insertBefore() / before()

作用：将A添加到B前面 —— A.insertBefore( ' B ' ) / B.before( ' A ' )

【例】点击长条，添加到盒子中第一个长条的上面，代码效果如下：

js代码

$('.c3').click(function (index) {$(this).removeClass('pos');// $(this).insertBefore('.c2');$('.c2').before(this);
})

.appendTo() / append()

作用：将A添加到B的最后 —— A.appendTo( ' B ' ) / B.append( ' A ' )

【例】点击长条，添加到盒子的最后，代码效果如下：

js代码

$('.c3').click(function (index) {$(this).removeClass('pos');// $(this).appendTo('.wrapper');$('.wrapper').append(this)
})

.prependTo / prepend()

作用：将A添加到B的最前面 —— A.prependTo( ' B ' ) / B.prepend( ' A ' )

【例】点击长条，添加到盒子的最前面，代码效果如下：

jQuery——插入元素节点的方法相关推荐

jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法元素内部插入子节点元素内部插入子节点有两种 ...
Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
jQuery删除元素的三中方法的区别：detach()、remove()、empty()
detach() 移除被选元素,包括所有文本和子节点. 该方法会保留移除元素的副本,允许它们在以后被重新插入.(这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素.d ...
Jquery中替换节点的方法replaceWith（）和replaceAll（）
本文转自:http://www.cnblogs.com/shuang121/archive/2011/12/27/2303748.html 在jquery中,我们可以通过replaceWith()和r ...
appium获取元素节点的方法_Appium学废系列(四) 如何写出优雅又健壮的脚本
‍‍正文共:3716字预计阅读时间:10分钟 1 合理使用appium自动化等待方法在自动化测试脚本的运行过程中,webdriver操作浏览器的时候,对于元素的定位是有一定的超时时间,大致应该在 ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
jq元素复制另一个元素的html,jq中复制克隆元素节点的方法
jquery中有一个 clone() 方法,它可以复制元素以及元素的子节点,可以使用它将一个元素复制到多个地方并展示,具体的使用方法可以参考下面的文章. JQuery clone() 方法 clone ...
jQuery 插入元素
在被选元素的内部 prepend() 方法在被选元素的开头(仍位于内部)插入指定内容. append() 方法在被选元素的结尾(仍然在内部)插入指定内容. 转载于:https://www.cnblog ...
js插入元素的新方法insertAdjacentHTML
下面介绍几个新的插入DOM的API: insertAdjacentText insertAdjacentHTML insertAdjacentElement 以上三个方法分别是用来向一个DOM元素中插 ...