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>
作者最新文章
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
