用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中了!
相关文章
这篇文章主要给大家介绍了关于利用原生js实现trigger方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
之前在做一个Javascript的日志控制台功能模块，希望能够在Javascript代码出错时捕获此错误，并将出错的文件及相应的行数打印到控制台并汇报给服务器。2010-09-09
这篇文章主要介绍了基于JavaScript的数据结构队列动画实现示例解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本文为大家介绍下使用js仿新浪微博登陆邮箱提示效果，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮组2013-08-08
这篇文章主要为大家详细介绍了微信小程序实现聊天室，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
本文主要介绍了canvas实现流星雨的背景效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了微信小程序实现图片放大预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
通用判断版本号是否在两者之间,也可以搭配判断是否大于某版本号,小于取反即可，本文给大家介绍通用javascript代码判断版本号是否在版本范围之间，需要的朋友参考下2015-11-11
这篇文章主要为大家详细介绍了如何利用JavaScript和Canvas实现绘制音频可视化波形图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
javascript 实现纯前端将数据导出excel两种方式
这篇文章主要介绍了javascript 实现纯前端将数据导出excel两种方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参一下2022-07-07
最新评论