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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 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
PHP正确配置mysql(apache环境)
2011/08/28 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js 操作符汇总
2014/11/08 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python正则-re的用法详解
2019/07/28 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
九年级数学教学反思
2014/02/02 职场文书
仓管员岗位责任制
2014/02/19 职场文书
先进事迹材料范文
2014/12/29 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js