JS 给span赋值|极客笔记

JS 给span赋值

在前端开发中，经常会遇到需要通过 JavaScript 来操作页面元素的情况，其中包括给 span 元素赋值。在本文中，我将详细介绍如何使用 JavaScript 来实现这一功能，并附上一些示例代码来帮助读者更好地理解。

1. 获取 span 元素

在给 span 元素赋值之前，首先需要获取到这个 span 元素。在 JavaScript 中，可以通过多种方式来获取页面元素，比如通过 id、class、tag 等。在这里，我们以 id 为例进行说明。

假设页面上有一个 span 元素，其 id 为 “mySpan”，我们可以通过以下方式来获取这个元素：

<!DOCTYPE html>
<html>
<head>
    <title>JS 给 span 赋值</title>
</head>
<body>
    <span id="mySpan"></span>

    <script>
        var spanElement = document.getElementById('mySpan');
        console.log(spanElement);
    </script>
</body>
</html>

上面的代码中，我们首先在 body 中定义了一个 id 为 “mySpan” 的 span 元素，然后通过 document.getElementById('mySpan') 来获取这个元素。最后通过 console.log 打印出这个元素，以便验证是否成功获取到。

2. 给 span 元素赋值

获取到 span 元素之后，接下来就是给这个 span 元素赋值。在 JavaScript 中，可以直接修改元素的 innerHTML 属性来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JS 给 span 赋值</title>
</head>
<body>
    <span id="mySpan"></span>

    <script>
        var spanElement = document.getElementById('mySpan');
        spanElement.innerHTML = 'Hello, World!';
    </script>
</body>
</html>

在这段代码中，我们获取了 id 为 “mySpan” 的 span 元素，并将其 innerHTML 属性设置为 ‘Hello, World!’。这样一来，页面上的 span 元素就被赋予了这个文本内容。