用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 相关文章推荐
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
微信开发 微信授权详解
Oct 21 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
react实现复选框全选和反选组件效果
Aug 25 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python中的sort方法使用详解
2014/07/25 Python
python从入门到精通(DAY 3)
2015/12/20 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python IDLE入门简介
2017/12/08 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python的concat等多种用法详解
2018/11/28 Python
python3实现多线程聊天室
2018/12/12 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
PHP统计代码行数的小代码
2019/09/19 Python
python retrying模块的使用方法详解
2019/09/25 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
小学教师办公室制度
2014/02/03 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
活动总结范文
2014/08/30 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
运动会报道稿300字
2014/10/02 职场文书
社保转移委托书范本
2014/10/08 职场文书
班级联欢会主持词
2015/07/03 职场文书
同学聚会祝酒词
2015/08/10 职场文书
英语导游欢迎词
2015/09/30 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python