删除父元素下所有节点:innerHTML VS removeChild

innerHTML & removeChild 都可以作为删除子节点的方式 

const element = document.getElementById(parentId);

// 方法1:将内容值为空
// 将HTML当前标签的起始和结束里面的HTML内容置空
if(element) {
    element.innerHTML = '';
}

// 方法2:移除所有子元素
if (element) {
      var childs = element.childNodes;
      for (var i = childs.length - 1; i >= 0; i--) {
        element.removeChild(childs[i]);
      }
 }
innerHTML兼容性:
所有主要浏览器都支持 innerHTML 属性,
但在IE6-IE9下,下列元素table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的

报错信息

 IE9:Invalid target element for this operation.

 IE6-8:Unknown runtime error

(PS:不过现在IE浏览器已经被放弃了,可以不用太考虑)

posted @ 2022-11-30 10:51  水晴  阅读(73)  评论(0编辑  收藏  举报