现在的位置: 首页 > 综合 > 正文

Javascript删除节点的全部内容

2013年05月25日 ⁄ 综合 ⁄ 共 1062字 ⁄ 字号 评论关闭

javascript删除节点的全部内容

最近做项目,需要实现一个基本的小功能,就是向一个DIV中插入一些html的内容(使用Ext 的template),因为每次向DIV中插入的内容可能会不一样所以需要再插入之前现将此DIV中的内容清空,于是开始的时候写了如下代码:

Js代码 
 
  1. var


     n = document.getElementById(
    'divName'

    ).childNodes.length;   
  2. for


     ( 
    var


     i = 0; i < n; i++) {   
  3.     document.getElementById(
    'divName'

    ).removeChild(   
  4.     document.getElementById(
    'divName'

    ).childNodes[i]);   
  5. }  

 

很简单的思路,就是一个一个删除吧,可是运行时候就会发现问题,因为在使用removeChild的时候,DIV的child的数量已经减去1了,也就是说假如说有3个孩子,对应为childNodes[0],childNodes[1],childNodes[2]。当执行完第一次将childNodes[0]删除后,i变为1,但此时原来剩下的childNodes[1],childNodes[2]已经变成了childNodes[0],和childNodes[1]...以此类推,就会发现这种方式是不可取的,原因就在于DIV的孩子数会随删除而减少。所以改了一下做法,实现了这个简单的小功能。

Js代码 
 
  1. var


     n = document.getElementById(
    'divName'

    ).childNodes.length;   
  2. for


     ( 
    var


     i = 0; i < n; i++) {   
  3.     document.getElementById(
    'divName'

    ).removeChild(   
  4.     document.getElementById(
    'divName'

    ).firstChild);   

摘自:http://prothiphoebe.iteye.com/blog/374135

【上篇】
【下篇】

抱歉!评论已关闭.