用JavaScript实现用一个DIV来包装文本元素节点


Posted in Javascript onSeptember 09, 2014

当你的应用需要依赖某个特定的JavaScript类库时,你无意中总会试图解决某些类库自身的问题,而不是语言的问题。就比如当我试图将文本(可能也包含HTML元素)用一个DIV元素包起来时。假设有以下HTML:

This is some text and <a href="">a link</a>

这时候如果想把它转换为下面这样:

<div>This is some text and <a href="">a link</a><div>

最简单暴力的方法是,你可以在父元素上通过 .innerHTML 属性来执行更新,但问题是这样一来所有绑定的事件监听都会失效,因为使用 innerHTML 时会重新创建一个HTML元素。这真是个大玻璃杯!所以这时候只能利用JavaScript来实现 —— 尺有所短、寸有所长。下面是实现代码:

var newWrapper = document.createElement('div'); 
while(existingParent.firstChild) { 
// 移动DOM元素,不会创建新元素 
newWrapper.appendChild(existingParent.firstChild); 
}

这里不能使用for循环,因为 childNodes 是一个动态节点组成的集合,只要移动节点就会影响到他的index索引值。我们用while循环一直检测父元素的 firstChild ,如果其返回一个代表 false 的值, 那么你就知道所有的节点都已经移到新的parent中了!

Javascript 相关文章推荐
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 #Javascript
js 数组去重的四种实用方法
Sep 09 #Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 #Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 #Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 #Javascript
You might like
解析php中获取系统信息的方法
2013/06/25 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python学生管理系统开发
2019/01/30 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
激励口号大全
2014/06/17 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
三好学生个人总结
2015/02/15 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
python小程序之飘落的银杏
2021/04/17 Python