设置innerHTML为空字符串是否移除子节点？代码运行疑问解析

问题1：将innerHTML设置为空字符串是否会移除子节点？ #

是的，element.innerHTML = '' 会彻底移除该元素的所有子节点。它的本质是把元素的内部HTML内容替换为空，原来的所有子元素、文本节点都会被从DOM树中剥离，若没有其他代码引用这些节点，它们会被浏览器的垃圾回收机制清理掉。

问题2：代码中innerHTML = ''的功能，以及为何看起来子节点没被移除？ #

功能说明 #

这段代码里的tagsEL.innerHTML = ''核心作用是清空旧标签，避免重复累积。每次用户在输入框按键时，都会重新根据当前输入生成标签列表，如果不清空旧内容，新生成的标签会不断追加到旧标签后面，导致界面上标签越来越多，和当前输入不匹配。

为何看起来子节点没被移除？ #

不是没被移除，而是移除后立刻又添加了新的子节点。代码执行流程是：

1. 先通过tagsEL.innerHTML = ''清空所有旧标签
2. 然后根据当前输入分割、过滤得到新的标签数组
3. 遍历数组创建新的<span>标签，逐个添加到tagsEL中

因为这个过程很快，用户肉眼察觉不到清空的瞬间，只会看到更新后的标签，所以会产生“子节点没被移除”的错觉。

补充验证 #

如果想验证清空的过程，可以在tagsEL.innerHTML = ''后面加一行调试代码：

console.log('清空后子节点数量:', tagsEL.children.length)

运行后打开浏览器控制台，就能看到每次按键时，都会先输出0，之后再添加新节点，说明清空操作确实生效了。

内容的提问来源于stack exchange，提问作者mb10p2