html 使用 js 变量作为文本

📌 相关文章

📜 html 使用 js 变量作为文本 - Html (1)

📅 最后修改于: 2023-12-03 15:01:16.252000 🧑 作者: Mango

有时候我们需要将 JavaScript 变量的值作为文本内容显示在 HTML 中。这种情况下，我们可以使用以下两种方式：

1. 字符串拼接

我们可以使用字符串拼接将 JavaScript 变量的值组合成一个字符串，然后将该字符串作为文本内容插入到 HTML 元素中。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>使用 JS 变量作为文本</title>
  </head>
  <body>
    <div id="text-container"></div>
    <script>
      var text = 'Hello, world!';
      var textContainer = document.getElementById('text-container');
      textContainer.innerText = 'Text: ' + text;
    </script>
  </body>
</html>

在这个例子中，我们定义了一个包含文本内容的 JavaScript 变量 text，然后使用 document.getElementById 方法获取了一个 HTML 元素 text-container，最后将字符串 'Text: ' 和 JavaScript 变量 text 拼接成了一个新的字符串并将其设置为 text-container 元素的文本内容。

2. 模板字符串

另一种比较新的方式是使用 ES6 的模板字符串。模板字符串允许我们在其中插入 JavaScript 表达式，并将其解析为字符串。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>使用 JS 变量作为文本</title>
  </head>
  <body>
    <div id="text-container"></div>
    <script>
      var text = 'Hello, world!';
      var textContainer = document.getElementById('text-container');
      textContainer.innerHTML = `Text: ${text}`;
    </script>
  </body>
</html>

这个例子中与第一个例子相比，我们使用了一对反引号（）将字符串包裹起来，并在其中使用 ${}定义了一个 JavaScript 表达式。在表达式中，我们直接使用了 JavaScript 变量text`，模板字符串会自动将其解析为字符串并插入到 HTML 元素中。

这些就是使用 JavaScript 变量作为文本的两种方式。可以根据场景选择适合的方式。