用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 相关文章推荐
javascript 闭包疑问
Dec 30 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
微信小程序聊天功能的示例代码
Jan 13 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实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php中使用websocket详解
2016/09/23 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
市场营销方案范文
2014/03/11 职场文书
信息技术课后反思
2014/04/27 职场文书
医院合作协议书
2014/08/19 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
趣味运动会口号
2015/12/24 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android