jQuery中replaceWith()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中replaceWith()方法用法。分享给大家供大家参考。具体分析如下:

此方法将所有匹配的元素替换成指定的HTML或DOM元素。

需要注意的是此方法是追加内容,也就是原来的内容还在。

特别说明:

HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。
文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染。

语法结构:

$(selector).replaceWith(content)

参数列表:

参数 描述
content 用于替换的内容。
selector 用于查找所要被替换的元素

实例代码:
<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div{

  width:100px;

  height:100px;

  border:1px solid blue;

}

p{

  width:150px;

  height:150px;

  border:1px solid red;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("p").replaceWith("<div>我是div元素</div>"); 

  }); 

}); 

</script>

</head>

<body>

<p>我是p元素</p>

<p>我是p元素</p>

<p>我是p元素</p>

<button>用div包裹每个段落</button>

</body>

</html>

以上代码可以可以将p元素替换为div元素。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
jQuery中before()方法用法实例
Dec 25 #Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 #Javascript
jQuery中after()方法用法实例
Dec 25 #Javascript
jQuery中prepend()方法用法实例
Dec 25 #Javascript
jQuery中append()方法用法实例
Dec 25 #Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 #Javascript
jQuery中html()方法用法实例
Dec 25 #Javascript
You might like
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
微信小程序 数据遍历的实现
2017/04/05 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
党员公开承诺书内容
2014/05/20 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
运动会宣传稿100字
2015/07/23 职场文书
音乐研修感悟
2015/11/18 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python