用JavaScript实现用一个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中了!

赞 (0)

相关推荐

  • js创建元素（节点）示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

  • JS获取节点的兄弟,父级,子级元素的方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • javascript删除元素节点removeChild()用法实例

    本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme

  • 一个获取第n个元素节点的js函数

    一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li> <p>test</p> <li>3<bu

  • javascript删除一个html元素节点的方法

    本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们

  • javascript基础之查找元素的详细介绍(访问节点)

    当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下. DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName().使用这几种方法方法我们可以查找html文档中的任意html元素.getElementById()首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的i

  • Js 获取HTML DOM节点元素的方法小结

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取:          (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已经出现了如proto

  • JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla

  • JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法.分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSi

随机推荐