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的面向对象的特性实现限制试用期
Aug 04 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Python模拟登录的多种方法(四种)
2018/06/01 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python如何调用百度识图api
2020/09/29 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
2014年学校党建工作汇报材料
2014/11/02 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
元旦晚会开场白
2015/05/29 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
情况说明书格式及范文
2019/06/24 职场文书