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);
    }
  }
}
相关推荐
极速蜗牛19 分钟前
告别部署焦虑!PinMe:前端开发者的极简部署神器
前端·javascript
LCG米33 分钟前
嵌入式Python工业环境监测实战:MicroPython读取多传感器数据
开发语言·人工智能·python
uhakadotcom1 小时前
Python Protobuf 全面教程:常用 API 串联与实战指南
前端·面试·github
by__csdn1 小时前
微前端架构:从理论到实践的全面解析
前端·javascript·vue.js·架构·typescript·vue·ecmascript
武汉唯众智创1 小时前
职业院校C语言程序设计(AIGC版)课程教学解决方案
c语言·开发语言·aigc·程序设计·c语言程序设计·c语言程序设计实训室
漫长的~以后1 小时前
Edge TPU LiteRT V2拆解:1GB内存设备也能流畅跑AI的底层逻辑
前端·人工智能·edge
qq_401700411 小时前
C语言void*
c语言·开发语言
sg_knight1 小时前
Python 面向对象基础复习
开发语言·python·ai编程·面向对象·模型
小福气_1 小时前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
程序员博博1 小时前
这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务
javascript·人工智能·后端