Question

我想知道元素是否为空。这可能是帮助人们理解innerText和innerHTML 之间差异的最好例子之一。

以下是示例：

1. <div>  </div> 2. <div> <span></span> </div> 3. <div> hi </div> 4. <div> hello  I know javascript </div> 5. <div> </div>

Example_Number | innerHTML | innerText | #childElements | isElementEmpty（结果）

1 ............................ |不空......空........ | 0 ......................... |是

2 ............................ |不空......空........ | 1 ......................... |否

3 ............................ |不空......不空...... .. 0 ......................... |否

4 ............................ |不空......不空...... .. 0 ......................... |否

5 ............................ |空.......... |空......... | 0 ......................... |是

在＃5中，考虑修剪值。

显然， innerHTML没有贡献来检查元素是否为空。现在，我们需要检查innerText / textContent和numberOfChildElement如何贡献。基于上述发现，我得出结论

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

Trimmerd innerText / textContent为空。（满足＃5）

子元素数量为零。（满足＃2）

所以代码变成了

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

我只是想验证我的方法并告诉我是否错过了任何用例，或者更好的解决方案会非常有用。

Answer 1

Innertext只是纯文本。无论你在innertext中放入什么内容，都会显示为纯文本。一个像"<b>sdasdas</b>" will be shown as "<b>sdasdas</b>“这样的文字 InnerHTML是简单的html代码。您在innerHTML中输入的内容将被视为HTML code.i.e.a文本，如"<b>sdasdas</b>" will be shown as "sdasdas" in bold letters

Answer 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());
});

如何查找HTML元素是否为空？

2 个答案: