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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
通过一次报错详细谈谈Point事件
May 17 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
js仿淘宝放大镜效果
Dec 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
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python实现12306火车票查询器
2017/04/20 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
分享6个隐藏的python功能
2017/12/07 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
社区优秀志愿者材料
2014/02/02 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL