jQuery before()和insertBefore()方法
2023-06-13 09:12:02 时间
本节教程介绍 before( ) 方法和 insertBefore( ) 方法在元素外部的 前面 插入内容。
jQuery before()方法
![默认效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce36c19.png)
图 1:默认效果![点击按钮后的效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce49881.png)
图 2:击按钮后的效果![默认效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce63de0.png)
图 3:默认效果![点击按钮后的效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce772d9.png)
图 4:点击按钮后的效果
在 jQuery 中,我们可以使用 before( ) 方法向所选元素外部的 前面 插入内容。
语法:
$(A).before(B)
$(A).before(B) 表示往 A 外部的前面插入 B。
举例:
!DOCTYPE html html head meta charset= utf-8 / title /title style type= text/css p{background-color:orange;} /style script src= js/jquery-1.12.4.min.js /script script $(function () { $( #btn ).click(function() { var $strong = strong jQuery教程 /strong $( p ).before($strong); /script /head body p C语言中文网 /p input id= btn type= button value= 插入 / /body /html
程序运行效果如图 1 所示。
![默认效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce36c19.png)
图 1:默认效果
我们点击【插入】按钮后,此时预览效果如图 2 所示。
![点击按钮后的效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce49881.png)
图 2:击按钮后的效果
我们点击【插入】按钮之后,此时得到的 HTML 结构如下。
strong jQuery教程 /strong p C语言中文网 /pjQuery insertBefore()方法
在 jQuery 中,insertBefore( ) 和 before( ) 这两个方法功能虽然相似,都是向所选元素外部的 前面 插入内容,但是两者的操作对象是颠倒的。
语法:
$(A).insertBefore(B)
$(A).insertBefore(B) 表示将 A 插入到 B 外部的前面。
举例:
!DOCTYPE html html head meta charset= utf-8 / title /title style type= text/css p{background-color:orange;} /style script src= js/jquery-1.12.4.min.js /script script $(function () { $( #btn ).click(function() { var $strong = strong jQuery教程 /strong $($strong).insertBefore( p /script /head body p C语言中文网 /p input id= btn type= button value= 插入 / /body /html
默认情况下,预览效果如图 3 所示。
![默认效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce63de0.png)
图 3:默认效果
我们点击【插入】按钮后,此时预览效果如图 4 所示。
![点击按钮后的效果](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642ce772d9.png)
图 4:点击按钮后的效果
在下面代码中,这两种插入节点的方式是等价的。
//方式1 var $strong = strong jQuery入门教程 /strong $( p ).before($strong); //方式2 var $strong = strong jQuery入门教程 /strong $($strong).insertBefore( p
23891.html
CSSC语言htmljavaJavaScript相关文章
- jquery中load中文乱码的解决方法
- jquery的checkbox、radio、select等方法总结详解编程语言
- Jquery替换已存在于element上的event的方法
- jquery中输入验证中一个不错的效果
- 基于jQuery的获得各种控件Value的方法
- JQuery弹出框定位实现方法
- Jquery下attr和removeAttr的使用方法
- jquery异步调用页面后台方法‏(asp.net)
- 一款Jquery分页插件的改造方法(服务器端分页)
- 用jquery模仿的a的title属性(兼容ie6/7)
- jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
- jQuery点击tr实现checkbox选中的方法
- jQuery的slideToggle方法实例
- jQuery动态地获取系统时间实现代码
- jQuery.attr()和.removeAttr()方法操作元素属性示例
- jquery鼠标滑过提示title具体实现代码
- 使用jquery获取网页中图片高度的两种方法
- jquery中对于批量deferred的处理方法
- Jquery遍历节点的方法小集
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- jquery使用ajax实现微信自动回复插件
- jQuery学习笔记之jQuery原型属性和方法
- jquery操作对象数组元素方法详解
- 基于jQuery实现的图片切换焦点图整理
- jquery中checkbox全选失效的解决方法
- jquery调取json数据实现省市级联的方法
- jQuery表格插件datatables用法总结