javascript删除节点的全部内容

最新推荐文章于 2021-10-31 12:45:07 发布

最新推荐文章于 2021-10-31 12:45:07 发布 · 233 阅读

文章标签：

#JavaScript #EXT #HTML #ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript清空HTML元素（DIV）内所有子元素的方法。通过迭代删除首个子节点的方式，确保了无论初始子节点数量如何，都能正确清空指定的DIV元素。

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

var n = document.getElementById('divName').childNodes.length;
for ( var i = 0; i < n; i++) {
	document.getElementById('divName').removeChild(
	document.getElementById('divName').childNodes[i]);
}

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

var n = document.getElementById('divName').childNodes.length;
for ( var i = 0; i < n; i++) {
	document.getElementById('divName').removeChild(
	document.getElementById('divName').firstChild);
}

所以，千万别小瞧js,很容易你就翻船了~