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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Angular简单验证功能示例
Dec 22 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
Javascript原型链及instanceof原理详解
May 25 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php 生成短网址原理及代码
2014/01/23 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python字符串处理实例详解
2017/05/18 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python中的id()函数指的什么
2017/10/17 Python
获取Django项目的全部url方法详解
2017/10/26 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
C#面试常见问题
2013/02/25 面试题
Python文件操作的面试题
2013/06/22 面试题
电大自我鉴定范文
2013/10/01 职场文书
文秘自荐信
2013/10/20 职场文书
高中生自我评语大全
2014/01/19 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python