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与C# Windows应用程序交互方法
Jun 29 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
教师实习自我鉴定
2013/12/13 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
工商局调档介绍信
2015/10/22 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Golang表示枚举类型的详细讲解
2021/09/04 Golang