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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28327989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 08:46:41  来源:igfitidea点击:

Check if there's some text inside an element

javascripthtml

提问by Alexandr Belov

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

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

  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!

那么,我如何使用 Javascript 做到这一点?请帮忙!

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?

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

回答by Md. Ashaduzzaman

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

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

HTML :

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

js小提琴

回答by Bhojendra Rauniyar

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

回答by Acidic

It's pretty simple:

这很简单:

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

回答by UndeadDragon

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).

您可以通过多种方式从 JS 访问 HTML 元素。一旦您访问了您的元素,您就可以使用 if(elem.innerHTML)。

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

PS var element = document.getElementsByClassName('event')[0];

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

不要在不检查数组大小的情况下使用下面的建议。

回答by Ajay Singh

Alternate method to innerHTML

innerHTML 的替代方法

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