javascript - Check if there's some text inside an element - Stack Overflow

admin管理员组

文章数量:1207167

I am creating an If...Else statement and need to check if the element has innerHTML / textContent. Like this:

  if (<span class="event"> *yet has some text inside*) {do smth}
  else {do smth else};

So, how do I do that using Javascript? Please, help!

UPD! I have dynamically changing content, and

 element.innerHTML

seems not working after I put some text inside my < span >. I mean it still thinks the < span > is empty. Any cure for that?

I am creating an If...Else statement and need to check if the element has innerHTML / textContent. Like this:

  if (<span class="event"> *yet has some text inside*) {do smth}
  else {do smth else};

So, how do I do that using Javascript? Please, help!

UPD! I have dynamically changing content, and

 element.innerHTML

seems not working after I put some text inside my < span >. I mean it still thinks the < span > is empty. Any cure for that?

• javascript
• html

Share Improve this question Follow edited Feb 4, 2015 at 18:01 Alexandr Belov asked Feb 4, 2015 at 17:48 Alexandr BelovAlexandr Belov 1,83499 gold badges3131 silver badges4444 bronze badges 5

• 1 stackoverflow.com/questions/21192623/… or stackoverflow.com/questions/27011053/… – SubjectCurio Commented Feb 4, 2015 at 17:53
• Do you want to check if there is any type of content what so ever or if it directly contains text as a child or text in child elements? – Xotic750 Commented Feb 4, 2015 at 18:19
• @Xotic750 It is about any text typed inside < span > < /span > tags. – Alexandr Belov Commented Feb 4, 2015 at 18:24
• @AlexandrBelov So if it contained, for example, another <span> but no text then you want a false or if it contained another <span> which had text this would also be false. You would only get a true if there is text as a child of <span class="event">? – Xotic750 Commented Feb 4, 2015 at 18:29
• 1 @AlexandrBelov, this should work now : jsfiddle.net/codeSpy/gvpkhtxo – Md Ashaduzzaman Commented Feb 4, 2015 at 18:30

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 6

It's pretty simple:

if (element.innerHTML) {
    // element has content
} else {
    // element is empty
}

Check the innerHTML of the span using document.getElementsByClassName("ClassName");. You need to index it as you may have more than one element with same class name. Add text inside span dynamically on button click. And check again if it effects the output. Try this way,

HTML :

<span class="event"></span>

<button id="addTextButton">Add Text In Span</button>

<button id="removeSpanTextButton">Empty Span</button>

<button id="checkSpanButton">Check Span Content</button>

javaScript :

var spanContent = document.getElementsByClassName("event")[0];

checkSpanButton.onclick = function(){
    if(spanContent.innerHTML == ""){
        alert("Span is empty..");
    }
    else{
        alert("Span Text : " + spanContent.innerHTML);
    }
};

// dynamically add text
addTextButton.onclick = function(){
    spanContent.innerHTML = "Added This Text.";
};

removeSpanTextButton.onclick = function(){
    spanContent.innerHTML = "";
};

jsFiddle

All current browsers support textContent, down to IE9.

textContent will return a clean version of all of the actual text, stripped of intervening tags. Unlike the less standard innerText, it is unaffected by changes in appearance brought about by CSS.

The simple solution is:

if (element.textContent) {
    //  do something
}
else {
    //  do something else
}

You can use:

var element = document.getElementsByClassName('event')[0];
if(element.innerHTML){
  //do something
} else{
  // do other things
}

If you want to iterate over all element that has class event then use:

var element = document.getElementsByClassName('event');
for(var i=0;i<element.length;i++){
  if(element[i].innerHTML){
    //do something
  } else{
    // do other things
  }
}

Alternate method to innerHTML

if(document.getElementById("element_id").lastChild) {
    //Has content
}
else {
    //No content
}

for example:

var x = document.getElementsByClassName("event");
var i;
for (i = 0; i < x.length; i++) {
    if (x[i].innerHTML)...
}

You can access HTML elements from JS with many ways. Once you have accessed yours element, you can just if(elem.innerHTML).

//P.S.
var element = document.getElementsByClassName('event')[0];

Don't use that advice below without checking array size.

本文标签： javascriptCheck if there39s some text inside an elementStack Overflow