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时间自动刷新实现原理与步骤
Jan 06 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
详解ES6中的三种异步解决方案
Jun 28 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代码
2008/04/09 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
git进行版本控制心得详谈
2017/12/10 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python实现ip代理池功能示例
2019/07/05 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
热门专业求职信
2014/05/24 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
健康证明
2015/06/19 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
golang语言指针操作
2022/04/14 Golang