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比较文档位置
Apr 08 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
react MPA 多页配置详解
Oct 18 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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 PDO中文乱码解决办法
2009/07/20 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php的sso单点登录实现方法
2015/01/08 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python之import机制详解
2014/07/03 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python中的字典操作及字典函数
2018/01/03 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
大学生简短的自我评价分享
2014/02/20 职场文书
2014年教师节寄语
2014/04/03 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
个人投资合作协议书
2014/10/12 职场文书
大学生党性分析材料
2014/12/19 职场文书
物资采购管理制度
2015/08/06 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
导游词之任弼时故居
2020/01/07 职场文书