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);
    }
  }
}
相关推荐
wheelmouse778811 分钟前
网络排查基础与实战指南:Ping 与 Telnet
开发语言·网络·php
敲代码的嘎仔34 分钟前
Java后端开发——真实面试汇总(持续更新)
java·开发语言·程序人生·面试·职场和发展·八股
迈巴赫车主43 分钟前
蓝桥杯20560逃离高塔
java·开发语言·数据结构·算法·职场和发展·蓝桥杯
dleei1 小时前
彻底淘汰老旧 SVG 插件:unplugin-icons 与 Tailwind CSS v4 自定义图标最佳实践
前端·程序员·前端框架
春日见1 小时前
E2E自驾规控30讲:导论
开发语言·驱动开发·git·matlab·计算机外设
wangchunting1 小时前
Jvm-垃圾收集器
java·开发语言·jvm
LlNingyu1 小时前
文艺复兴,什么是XSS,常见形式(二)
前端·安全·xss
沐知全栈开发1 小时前
PHP Math: 精通PHP中的数学函数与应用
开发语言
汉堡大王95271 小时前
# AI 终于能"干活"了——Function Calling 完全指南
javascript·人工智能·机器学习
明君879971 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter