如果span为空,则显示span内的文本

Display text inside the span if the span is empty

本文关键字:span 文本 显示 为空 如果      更新时间:2023-09-26

我想在span中添加一些文本,如果它是空的。

下面的span确实包含文本,所以它不应该做任何事情。

<span class="content">This span has text so do nothing</span>

下面的span不包含任何文本,所以我想让Javascript自动为我添加文本到span中,我想让它显示"Public"。

<span class="content"></span>

因此上面示例的最终结果将是

<span class="content">Public</span>

您可以尝试:empty选择器

例如

$("span.content:empty")
  .text("Public")

可以使用 html() text() 带回调函数

$('span.content').html(function(i, v) {
  return v.trim() == '' ? 'public' : v;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="content">This span has text so do nothing</span>
<span class="content"></span>

in jQuery

$span = $(".span");
if($span.text() == ""){
    $span.text("Public");
}

这里可以看到示例- JSFIDDLE - http://jsfiddle.net/3vcL2e97/

使用纯JavaScript:

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

这是小提琴:http://jsfiddle.net/7fet87rb/