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中字符串拼接详解
Sep 26 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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桌面中心(一) 创建数据库
2007/03/11 PHP
PHP实现下载功能的代码
2012/09/29 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php的socket编程详解
2016/11/20 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python3中rank函数的用法
2019/11/27 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python实现3D地图可视化
2020/03/25 Python
python爬虫容易学吗
2020/06/02 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
物业管理大学生个人的自我评价
2013/10/10 职场文书
农场厂长岗位职责
2013/12/28 职场文书
创业计划书如何编写
2014/02/06 职场文书
重阳节活动总结
2014/08/27 职场文书
儿子满月酒致辞
2015/07/29 职场文书
商务宴会祝酒词
2015/08/11 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书