如何判断一个 HTML 元素是否为空？答案

【问题标题】：How to find if an HTML element is empty or not?如何判断一个 HTML 元素是否为空？
【发布时间】：2014-07-18 13:05:47
【问题描述】：

我想知道一个元素是否为空。这可能是帮助人们理解innerText 和innerHTML 之间的区别 的最佳示例之一。

以下是示例：

1. <div> <!-- Just a comment node is present inside a div --> </div>

2. <div> <span></span> </div>

3. <div> hi </div>

4. <div> hello <!-- world --> I know javascript </div>

5. <div>    </div>

Example_Number |内部HTML |内文 | #childElements | isElementEmpty(结果)

1.......................|非空......|空…………| 0.......................|是的

2.......................|非空......|空…………| 1.......................|没有

3.......................|非空......|不是空的..| 0.......................|没有

4.......................|非空......|不是空的..| 0.......................|没有

5.......................|空…………|空…………| 0.......................|是的

在#5 中，考虑了修剪后的值。

很明显，innerHTML 没有帮助检查元素是否为空。现在，我们需要检查 innerText/textContent 和 numberOfChildElement 的贡献。所以基于以上发现，我得出结论

同时满足这两个条件时，元素为空。

修剪的内部文本/文本内容为空。（满足 #5）
子元素的数量为零。（满足 #2）

所以代码变成了

function isEmpty(element) {
  return (element.textContent.trim() && element.childElementCount == 0);
}

我只是想验证我的方法，并告诉我是否错过了这里的任何用例，或者更好的解决方案真的很有帮助。

【问题讨论】：

只是补充一些信息，所有浏览器都支持textContent而FF不支持innerText所以我在代码中使用了textContent
这是你的答案stackoverflow.com/questions/19030742/…
仅供参考 .childElementCount、.textContent 和 .trim() 需要 IE9 或更高版本，因此此解决方案仅适用于 IE9+。
空的标准是什么？没有可见的文字？不占空间？或者没有可见的文本和子元素？我可以争辩说，您的 5 个示例实际上都不是空的，因为它们都有至少包含一些内容的子节点。
@jfriend00 是的，一个元素是空的，它里面没有 html 元素并且没有可见的文本。此外，是的 IE9+ 解决方案是我想要支持的。感谢您提出这个问题。

标签： javascript innerhtml is-empty innertext

【解决方案1】：

Innertext 只是纯文本。无论您在 Innertext 中输入什么内容都将显示为纯文本。即像 "sdasdas" will be shown as "sdasdas"
这样的文本 InnerHTML 是纯 html 代码。无论您在 innerHTML 中输入的内容都将被视为 HTML 代码。即类似于 "sdasdas" will be shown as "sdasdas" in bold letters

的文本

【讨论】：

这似乎是评论，而不是答案。
问题是“innerText 和 innerHTML 之间的区别（用于查找 en 元素是否为空）”。所以我认为我的评论有资格作为答案
查看 OP 最近的评论。这不是他们的问题。
@AbhinabKanrar 我很抱歉造成有关瓷砖的一些混乱。从我给出的标题和表格中，我的问题现在还不清楚吗？

【解决方案2】：

我已经准备了一个例子来帮助你理解innerText和innerHTML和其他相关函数的区别

<HTML><BODY>
<div id="div1">
<H1><B>Hi<I> There</I></B></H1>
</div>
innerText: Works only in IE browser<br/>
innerHTML: work on all browser and return html content<br/>
textContent : Remove html tag from content<br/>
Jquery function to get text / HTML <br/>
.text()<br/>
.html()<br/>
<input id="innerText" type="button" value="innerText"/>
<input id="innerHTML" type="button" value="innerText"/>
<input id="textContent" type="button" value="textContent"/>
<input id="text" type="button" value=".text()"/>
<input id="html" type="button" value=".html()"/>

$( "#innerText" ).click(function() {

alert(document.getElementById("div1").innerText);
});

$( "#innerHTML" ).click(function() {
   alert(document.getElementById("div1").innerHTML);
});

$( "#textContent" ).click(function() {
   alert(document.getElementById("div1").textContent);
});

$( "#text" ).click(function() {
   alert( $("#div1").text());
});

$( "#html" ).click(function() {
   alert( $("#div1").html());
});

【讨论】：