0

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.

  1. Trimmerd innerText/textContent is empty. (Satisfies #5)
  2. 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.

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
  • Just to add some information, textContent is supported in all browsers while FF does not support innerText So I have used textContent in the code – Sachin Jain May 29 '14 at 05:34
  • here is your answer http://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript – Rachit Patel May 29 '14 at 05:35
  • FYI `.childElementCount`, `.textContent` and `.trim()` require IE9 or higher so this solution would only be for IE9+. – jfriend00 May 29 '14 at 05:40
  • What is your criteria for empty? No visible text? Consumes no space? Or no visible text and no child elements? I could argue that none of your 5 examples are actually empty as all have child nodes with at least some content. – jfriend00 May 29 '14 at 05:44
  • @jfriend00 Yes, an element is empty is there is no html element inside it and there is no visible text. Moreover, yes IE9+ solution is what i wanted to support. Thanks for asking this. – Sachin Jain May 29 '14 at 05:46
  • What exactly is your question? – jfriend00 May 29 '14 at 05:48
  • Doing it like this: `return (element.childElementCount === 0 && element.textContent.trim());` would be more efficient if there were lots of child objects with text because it would avoid evaluating `.textContent` in those cases which has to traverse the entire child tree. – jfriend00 May 29 '14 at 05:49
  • @jfriend00 Yeah..That is a great optimization. I just want to ensure that I did not miss any use case. – Sachin Jain May 29 '14 at 05:51
  • @blunderboy - I'd suggest you edit your question to make it 100% clear what your question is. You've already gotten one answer that isn't about what you say the question is. – jfriend00 May 29 '14 at 05:53

2 Answers2

1

Innertext is just plain text.Whatever you put in the innertext will be shown as plain text.i.e.a 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.i.e.a text like "<b>sdasdas</b>" will be shown as "sdasdas" in bold letters

Abhinab Kanrar
  • 1,532
  • 2
  • 20
  • 46
0

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());
});
Rachit Patel
  • 854
  • 5
  • 12