CODEWITHSUNDEEP
javascripthtml
Alexandr Belov
Alexandr Belov

Reputation: 1834

Check if there's some text inside an element

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?

Upvotes: 5

Views: 44260

Answers (6)

Manngo
Manngo

Reputation: 16281

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
}

Upvotes: 2

UndeadDragon
UndeadDragon

Reputation: 707

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.

Upvotes: 0

Ajay Singh
Ajay Singh

Reputation: 733

Alternate method to innerHTML

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

Upvotes: 0

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

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

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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
  }
}

Upvotes: 1

Acidic
Acidic

Reputation: 6282

It's pretty simple:

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

Upvotes: 6

Related Questions