js移除子元素

javascript 复制代码
removeAllChild(parentId) {
  const parentNode = document.getElementById(parentId);
  if (parentNode) {
    parentNode.innerHTML = '';
  }
}

使用innerHTML属性将其设为空字符串,可以一次性清除该元素的所有子节点内容。但是需要注意的是,innerHTML会触发重排和重绘,如果是大量DOM操作,性能消耗可能较大。如果只需要删除子节点而不需要保留原有DOM树结构或者触发事件,这种方法更为简洁高效。

如果需要保持原有的DOM树结构或者关心性能,原始的while循环是一个更好的选择。若要优化原始循环,可以尝试使用childNodes迭代器配合for循环:

javascript 复制代码
removeAllChild(parentId) {
  const parentNode = document.getElementById(parentId);
  if (parentNode) {
    for (let child; (child = parentNode.firstChild);) {
      parentNode.removeChild(child);
    }
  }
}
相关推荐
黑客飓风12 分钟前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
啊阿狸不会拉杆30 分钟前
《算法导论》第 32 章 - 字符串匹配
开发语言·c++·算法
emojiwoo1 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
武当豆豆2 小时前
C++编程学习(第25天)
开发语言·c++·学习
张人玉2 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧2 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang3 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip3 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015113 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny3 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm