JQuery替换DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery替换DOM节点的方法。分享给大家供大家参考。具体分析如下:

如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

本例 JQuery 代码:

<script type="text/javascript">
//<![CDATA[
$(function(){
 $("#btn_1").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p">欢迎访问3water.com</p>'); 
 })
 $("#btn_2").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p" title="欢迎访问三水点靠木" >欢迎访问三水点靠木</p>'); 
  // 同样的实现: $('<p class="nm_p">欢迎访问3water.com</p>').replaceAll(".nm_p"); 
 })
});
//]]>
</script>

也可以使用JQuery中另一个方法replaceAll()来实现,该方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作,可以使用如下jQuery代码实现同样的功能:

$('<p class="nm_p">欢迎访问3water.com</p>').replaceAll(".nm_p");

这两句JQuery代码都会实现节点替换效果。

PS:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue mounted组件的使用
Jun 18 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
JavaScript中实现map功能代码分享
Jun 11 #Javascript
JQuery复制DOM节点的方法
Jun 11 #Javascript
JavaScript中标识符提升问题
Jun 11 #Javascript
JQuery删除DOM节点的方法
Jun 11 #Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python删除特定文件的方法
2015/07/30 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
相亲大会策划方案
2014/06/05 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
学籍证明模板
2014/11/21 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL