JavaScript为span标签赋值的三种常用方式

作者:代码拾荒时间:2026-10-29 17:56:40浏览:274

本文介绍JavaScript中为span标签赋值的两种核心方法:通过innerHTML输出HTML结构,以及通过innerText输出纯文本。此外,还演示了如何利用jQuery在页面加载后批量为多个span元素赋值当前时间,适用于需要动态更新多处显示内容的场景。

JavaScript为span标签赋值的三种常用方式

在JavaScript中,为span标签赋值通常采用两种主要方式:

通过innerHTML输出HTML内容

第一种方式是通过设置innerHTML属性来输出HTML内容。


<body onload="s()">
<span id="hello"></span>
<script language="javascript">
 function s(){
document.getElementById("hello").innerHTML = "<iframe src= height=400 width=300></iframe>";
}
 </script>

通过innerText输出纯文本

第二种方式是通过设置innerText属性来输出纯文本。


<body onload="s()">
<span id="hello"></span>
<script language="javascript">
 function s(){
document.getElementById("hello").innerText = "hello world";
}
</script>

利用jQuery批量为多个span赋值

第三种场景是在页面加载完成后,利用jQuery为多个span标签批量赋值。

例如,若需要在页面加载后于多处显示当前时间,则需对多个span元素进行赋值操作。

相关的HTML结构写法如下:


<span name="currentDate"></span> (多个span) 

对应的jQuery实现代码为:


<script> 
$(document).ready(function() { 
var currentDate = new Date().toLocaleDateString(); 
$("span[name='currentDate']").each(function() { 
$(this).text(currentDate); 
}); 
}); 
</script> 
作者最新文章