如何不使用jQuery，仅用JavaScript判断元素是否包含子元素

刚好能解决你的需求！下面是纯JavaScript实现的元素为空判断方法，完全不用jQuery，满足你要的空元素返回true、有内容返回false的要求，而且适配你补充的「检查是否包含任何子元素」的实际需求：

核心函数 #

function isElementEmpty(element) {
  // 先校验元素是否存在，避免传入null/undefined时报错
  if (!element) return false;
  
  // 同时检查：无有效文本内容 + 无HTML子元素
  return element.textContent.trim().length === 0 && element.children.length === 0;
}

函数逻辑说明 #

• 第一步先判断传入的元素是否有效，防止非元素对象导致的运行错误
• element.textContent.trim()：把元素内所有空白字符（空格、换行、制表符都算）去掉，确保像<div> </div>这种纯空白的元素也会被判定为空
• element.children.length === 0：检查元素是否没有任何HTML子元素（比如嵌套的div、span、图片等）
• 只有当既没有可识别的文本内容，也没有子元素时，函数才返回true，代表这个元素是空的

实际使用示例 #

• 空div：<div></div> → 调用isElementEmpty(document.querySelector('div')) → 返回 true
• 包含文本的div：<div>Hello World</div> → 返回 false
• 仅含空白的div：<div> \n\t </div> → 返回 true
• 带空子元素的div：<div><span></span></div> → 返回 false

如果你的需求只需要检查「是否没有任何HTML子元素」（不管文本内容），可以用简化版：

function hasNoChildElements(element) {
  return !!element && element.children.length === 0;
}

内容的提问来源于stack exchange，提问作者Frikk Ormestad Larsen