0

我想知道一个元素是否为空。可能这也是帮助人们理解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 的贡献。所以基于以上发现，我得出结论

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

  1. 修剪的 innerText/textContent 为空。（满足#5）
  2. 子元素的数量为零。（满足#2）

所以代码变成了

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

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

4

2 回答 2

1

Innertext 只是纯文本。无论您在 innertext 中输入的内容都将显示为纯文本。iea 文本如"<b>sdasdas</b>" will be shown as "<b>sdasdas</b>“
InnerHTML 是纯 html 代码。无论您输入 innerHTML 都将被视为 HTML 代码。iea 文本如"<b>sdasdas</b>" will be shown as "sdasdas" in bold letters

于 2014-05-29T05:47:14.783 回答
0

我已经准备了示例，可以帮助您了解 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());
});
于 2014-05-29T06:24:36.187 回答