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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
js定时器实例分享
Dec 20 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
《Python学习手册》学习总结
2018/01/17 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python虚拟环境迁移方法
2019/01/03 Python
Python 如何对文件目录操作
2020/07/10 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
活动总结怎么写啊
2014/05/07 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
感谢信范文大全
2015/01/23 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
入党积极分子群众意见
2015/06/01 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers