在html页面中使用js变量

在HTML页面中使用JavaScript变量可以通过多种方式实现，具体取决于你希望如何展示或利用这些变量。以下是一些常见的方法和示例。

1. 直接在HTML中展示JavaScript变量

你可以使用JavaScript将变量的值插入到HTML元素中，例如通过设置元素的innerHTML、textContent或value属性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JavaScript Variables in HTML</title>
  7. </head>
  8. <body>
  9.     <h1 id="title"></h1>
  10.     <p id="content"></p>
  12.     <script>
  13.         const title = "Welcome to My Website";
  14.         const content = "This is a paragraph with some dynamic content.";
  16.         document.getElementById('title').textContent = title;
  17.         document.getElementById('content').textContent = content;
  18.     </script>
  19. </body>
  20. </html>

2. 使用模板字符串和插值

通过模板字符串，你可以将JavaScript变量直接嵌入到字符串中，并将其插入到HTML中。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JavaScript Variables in HTML</title>
  7. </head>
  8. <body>
  9.     <div id="output"></div>
  11.     <script>
  12.         const userName = "John Doe";
  13.         const age = 30;
  15.         const htmlContent = `
  16.             <h1>Hello, ${userName}!</h1>
  17.             <p>You are ${age} years old.</p>
  18.         `;
  20.         document.getElementById('output').innerHTML = htmlContent;
  21.     </script>
  22. </body>
  23. </html>

3. 动态创建和插入元素

你可以使用JavaScript动态创建HTML元素，并将这些元素插入到DOM中。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JavaScript Variables in HTML</title>
  7. </head>
  8. <body>
  9.     <div id="container"></div>
  11.     <script>
  12.         const data = [
  13.             { name: "Alice", age: 25 },
  14.             { name: "Bob", age: 30 },
  15.             { name: "Charlie", age: 35 }
  16.         ];
  18.         const container = document.getElementById('container');
  20.         data.forEach(person => {
  21.             const div = document.createElement('div');
  22.             div.textContent = `${person.name}, ${person.age} years old`;
  23.             container.appendChild(div);
  24.         });
  25.     </script>
  26. </body>
  27. </html>

4. 表单元素中的JavaScript变量

你可以通过JavaScript设置表单元素的值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JavaScript Variables in HTML</title>
  7. </head>
  8. <body>
  9.     <form>
  10.         <label for="username">Username:</label>
  11.         <input type="text" id="username">
  12.         <br>
  13.         <label for="age">Age:</label>
  14.         <input type="number" id="age">
  15.     </form>
  17.     <script>
  18.         const userName = "Jane Doe";
  19.         const userAge = 28;
  21.         document.getElementById('username').value = userName;
  22.         document.getElementById('age').value = userAge;
  23.     </script>
  24. </body>
  25. </html>

5. 在事件中使用JavaScript变量

你可以在事件处理器中使用JavaScript变量。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JavaScript Variables in HTML</title>
  7. </head>
  8. <body>
  9.     <button id="greetBtn">Greet</button>
  10.     <p id="greetMessage"></p>
  12.     <script>
  13.         const userName = "Sam";
  15.         document.getElementById('greetBtn').addEventListener('click', () => {
  16.             document.getElementById('greetMessage').textContent = `Hello, ${userName}!`;
  17.         });
  18.     </script>
  19. </body>
  20. </html>

结论

这些方法展示了如何在HTML页面中使用JavaScript变量，以实现动态内容展示。

JavaScript

JS怎么实现刮奖效果

上一篇

JavaScript

使用Javascript制作计算器

下一篇

猜你喜欢

JS获取昨天的年月日

0248
×

下载海报：