HTML JS: 如何动态插入文本到SPAN元素中

在本文中，我们将介绍如何通过HTML和JavaScript动态地向SPAN元素中插入文本。

阅读更多：HTML 教程

什么是SPAN元素

在HTML中，SPAN元素是一个内联元素，用于包裹短文本或其他内联元素。它没有特定的语义，通常用于样式或脚本处理。

在以下示例中，我们将使用一个具有id属性的SPAN元素来展示如何动态插入文本：

<span id="mySpan"></span>

使用JavaScript动态插入文本

要使用JavaScript动态插入文本，我们需要获取到对应的SPAN元素，并将文本赋值给它的textContent或innerText属性。

以下是一种常见的获取SPAN元素的方法：

var spanElement = document.getElementById("mySpan");

一旦我们获取到了SPAN元素，就可以使用textContent或innerText来插入文本。这两个属性的区别在于插入的文本是否会被HTML解析。

spanElement.textContent = "这是通过textContent插入的文本";
spanElement.innerText = "这是通过innerText插入的文本";

在上述示例中，SPAN元素将分别显示 “这是通过textContent插入的文本” 和 “这是通过innerText插入的文本”。

动态插入变量

我们也可以将变量的值动态地插入到SPAN元素中。例如，我们可以将用户的输入或从其他元素获取的值插入到SPAN中。

以下示例展示了如何通过按钮点击的事件处理函数来获取input元素的值，并将其插入到SPAN元素中：

<input type="text" id="myInput">
<button onclick="insertText()">点击插入</button>
<span id="mySpan"></span>

<script>
function insertText() {
  var inputElement = document.getElementById("myInput");
  var spanElement = document.getElementById("mySpan");
  var inputValue = inputElement.value;

  spanElement.textContent = inputValue;
}
</script>

在上述示例中，当用户在文本输入框中输入一些文本后，点击按钮将触发insertText函数。该函数获取到输入框的值，并将其插入到SPAN元素中。