用JavaScript实现用一个DIV来包装文本元素节点
更新时间：2014年09月09日 10:51:11 投稿：whsnow
当我试图将文本(可能也包含HTML元素)用一个DIV元素包起来时，可以使用下面的方法，需要的朋友可以参考下
当你的应用需要依赖某个特定的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数组的splice方法详细介绍，splice方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组2022-09-09
DEFER怎么用？...2006-07-07
这篇文章主要介绍了js中数组的常用方法,结合实例形式分析了js中的常用数组方法,如push、concat、pop、splice、reverse、join等功能与用法,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇遍历js中对象的属性和值的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
在Js世界中有些操作会让你无法理解，但是却无比优雅,下面这篇文章主要给大家介绍了关于如何让你的JavaScript函数更加优雅的相关资料,需要的朋友可以参考下2021-07-07
本文给大家分享的是使用range做的一个简单的手动调色并可以得到RGB值的小工具，非常的实用，有需要的小伙伴可以参考下2016-09-09
这篇文章主要为大家详细介绍了javascript实现循环广告条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章介绍了HTML中用JS实现旋转的圣诞树，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
这篇文章主要介绍了Easyui Tree获取当前选择节点的所有顶级父节点,以及easyUI Tree显示选中节点的所有父节点的实现代码，需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了使用localStorage替代cookie做本地存储，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论