用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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
了解一点js的Eval函数
2012/07/26 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python去除字符串中的换行符
2017/10/11 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python图像和办公文档处理总结
2019/05/28 Python
Python request操作步骤及代码实例
2020/04/13 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Python基础之操作MySQL数据库
2021/05/06 Python
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技