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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
Javascript执行上下文顺序的深入讲解
Nov 04 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 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
九种原生js动画效果
2015/11/11 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
工作中个人的自我评价
2013/12/31 职场文书
大学毕业感言200字
2014/03/09 职场文书
教堂婚礼主持词
2014/03/14 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
会议主持词开场白
2015/05/28 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
mysql 排序失效
2022/05/20 MySQL