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);
    }
  }
}
相关推荐
没有梦想的咸鱼185-1037-1663几秒前
基于R语言机器学习方法在生态经济学领域中的实践技术应用
开发语言·机器学习·数据分析·r语言
@小红花14 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵16 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
向上的车轮25 分钟前
基于go语言的云原生TodoList Demo 项目,验证云原生核心特性
开发语言·云原生·golang
The Chosen One98527 分钟前
C++ : AVL树-详解
开发语言·c++
魔云连洲31 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年34 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
PH_modest37 分钟前
【Qt跬步积累】—— 初识Qt
开发语言·qt
IT_陈寒41 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范