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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
Javascript的无new构建实例详解
May 15 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
js实现中文实时时钟
Jan 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中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详解如何运行vue项目
2019/04/15 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python Crypto模块的安装与使用方法
2017/12/21 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Puppeteer使用示例详解
2019/06/20 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
天气温馨提示语
2015/07/14 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL