检查元素内是否有一些文本

Question

我正在创建一个 If...Else 语句，并且需要检查元素是否具有innerHTML / textContent。像这样：

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

那么，我该如何使用 Javascript 来做到这一点呢？请帮忙！

更新！我有动态变化的内容，并且

 element.innerHTML

我在 <span> 中放入一些文本后似乎不起作用。我的意思是它仍然认为 <span> 是空的。有什么办法可以治愈吗？

Answer 1

这很简单：

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

Answer 2

使用检查innerHTML跨度document.getElementsByClassName("ClassName");。您需要index它，因为您可能有多个具有相同类名的元素。span单击按钮时动态添加文本。并再次检查是否影响输出。试试这个方法，

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