📌  相关文章
📜  使用 javascript 变量向 html 输入插入值 - Javascript (1)

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

使用 JavaScript 变量向 HTML 输入插入值 - Javascript

当我们需要通过 JavaScript 动态地修改 HTML 元素的值时，我们可以使用以下方法：

1. 获取元素对象

首先，我们需要获取要修改的 HTML 元素对象。可以使用 document.getElementById 方法，根据 id 属性获取该元素对象。例如：

const myElement = document.getElementById("my-id");

其中，my-id 为要修改元素的 id 属性值。

2. 修改元素值

获取该元素对象后，我们可以使用各种属性或方法来修改元素的值。例如，我们可以使用 innerHTML 属性来修改元素内部的 HTML 内容。例如：

myElement.innerHTML = "Hello World!";

这将把元素内部的 HTML 内容设置为字符串 "Hello World!"。

3. 使用 JavaScript 变量

如果要在 HTML 元素中插入 JavaScript 变量的值，我们可以简单地将变量插入到字符串中。例如：

const myName = "John";
myElement.innerHTML = "My name is " + myName;

这将把元素内部的 HTML 内容设置为字符串 "My name is John"。

完整示例

以下是一个完整的示例，演示如何使用 JavaScript 变量向 HTML 输入插入值：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Example</title>
  </head>
  <body>
    <p id="my-text"></p>
    
    <script>
      const myName = "John";
      const myElement = document.getElementById("my-text");
      myElement.innerHTML = "My name is " + myName;
    </script>
  </body>
</html>

以上示例将输出如下 HTML 内容：

<p id="my-text">My name is John</p>

通过上述方法，我们可以方便地使用 JavaScript 变量向 HTML 输入插入值。