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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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来检测proxy
2006/10/09 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
分享php邮件管理器源码
2016/01/06 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python如何省略括号方法详解
2020/03/21 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
试述DBMS的主要功能
2016/11/13 面试题
2014学年自我鉴定
2014/02/23 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
新郎结婚保证书
2015/02/26 职场文书
大学生实习推荐信
2015/03/27 职场文书
病危通知单
2015/04/17 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server