用JavaScript来包装文本元素节点

简介: 原文链接: Wrapping Text Nodes and Elements with JavaScript原文日期: 2014-09-04翻译日期: 2014-09-06翻译人员: 铁锚当你的应用需要依赖某个特定的JavaScript类库时,你无意中总会试图解决某些类库自身的问题,而不是语言的问题。
原文日期: 2014-09-04
翻译日期: 2014-09-06
翻译人员: 铁锚

当你的应用需要依赖某个特定的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中了!

目录
相关文章
|
19天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
39 4
|
2月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
50 1
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
21 5
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
28 2
|
2月前
|
JavaScript
js 特殊文本的判断
js 特殊文本的判断
39 0
|
3月前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
3月前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组