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 Timing
Apr 21 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
小程序中手机号识别的示例
Dec 14 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 URL编码解码函数代码
2009/03/10 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
深入php之规范编程命名小结
2013/05/15 PHP
PHP缓冲区用法总结
2016/02/14 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python装饰器语法糖
2019/01/02 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python 实现生成均匀分布的点
2019/12/05 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python函数式编程实例详解
2020/01/17 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
《口技》教学反思
2014/02/21 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
学习雷锋演讲稿
2014/05/10 职场文书