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知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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/20 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python中defaultdict的用法详解
2017/06/07 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
房屋租赁协议书
2014/04/10 职场文书
毕业评语大全
2014/05/04 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis
SQL Server中搜索特定的对象
2022/05/25 SQL Server