How to find if an HTML element is empty or not?
Question
I want to find out if an element is empty or not. Probably this is one of the best examples to help people understand difference between innerText and innerHTML as well.
Here are the examples:
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 | innerHTML | innerText | #childElements | isElementEmpty(Result)
1............................| Not Empty....| Empty........| 0.........................| YES
2............................| Not Empty....| Empty........| 1.........................| No
3............................| Not Empty....| Not Empty..| 0.........................| No
4............................| Not Empty....| Not Empty..| 0.........................| No
5............................| Empty..........| Empty.........| 0.........................| Yes
In #5, trimmed value is considered.
Clearly, innerHTML does not contribute to check whether an element is empty or not. Now, we need to check how innerText/textContent and numberOfChildElement contribute. So based on above findings, I have concluded
An element is empty when both of these conditions is met.
- Trimmerd innerText/textContent is empty. (Satisfies #5)
- Number of child elements is ZERO. (Satisfies #2)
So the code becomes
function isEmpty(element) {
return (element.textContent.trim() && element.childElementCount == 0);
}
I just want to validate my approach and tell if I miss any use case here or a better solution would be really helpful.
2 answers
solution1
1 2014-05-29 05:47:14
Innertext is just plain text.Whatever you put in the innertext will be shown as plain text.iea text like "<b>sdasdas</b>" will be shown as "<b>sdasdas</b> "
InnerHTML is plain html code.WHatever you put in innerHTML will be treated as HTML code.iea text like "<b>sdasdas</b>" will be shown as "sdasdas" in bold letters
solution2
0 2014-05-29 06:24:36
I have prepared example which is help you to understand difference between innerText and innerHTML and other related function
<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());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.