当前位置：首页 > 前端开发 > 正文

如何在HTML中使用JS变量？

admin
前端开发
2025-07-01
6

在HTML中引用 JavaScript变量可通过内联事件属性、DOM操作或模板字符串实现，常用方法包括使用script标签内JS代码操作元素内容，或通过getElementById结合innerHTML动态更新页面数据。

在HTML中引用JavaScript变量是前端开发的基础操作,主要用于动态更新页面内容，以下是5种常用方法及详细示例：

通过DOM操作修改元素内容

原理：使用JavaScript获取DOM元素后修改其文本或HTML内容

<p id="output"></p> <script> const userName = "张三"; document.getElementById("output").textContent = `用户：${userName}`; </script>

特点：与行为分离原则

避免XSS攻破（推荐使用textContent而非innerHTML）
执行时机需在DOM加载后（可将脚本放在body末尾或使用DOMContentLoaded事件）

内联事件处理

原理：在HTML事件属性中直接调用JS变量

<button onclick="alert(`当前用户：${userName}`)">显示用户</button> <script> const userName = "李四"; </script>

注意：

需确保变量为全局作用域（如示例中在<script>内声明而不使用const/let）
不推荐复杂逻辑,会降低可维护性

模板字符串动态生成HTML

原理：利用反引号语法拼接HTML字符串

<div id="container"></div> <script> const product = { name: "手机", price: 2999 }; document.getElementById("container").innerHTML = ` <div class="product"> <h3>${product.name}</h3> <p>价格：<strong>${product.price}元</strong></p> </div> `; </script>

安全警告：

如何在HTML中使用JS变量？第1张

如何在HTML中使用JS变量？第2张

直接使用innerHTML可能引发XSS攻破
对用户输入数据必须转义（如：${escapeHtml(userInput)}）

表单元素值绑定

原理：直接操作表单控件的value属性

<input type="text" id="emailInput" readonly> <script> const userEmail = "contact@example.com"; document.getElementById("emailInput").value = userEmail; </script>

数据属性存储

原理：将变量值存储在HTML5的data-*属性中

<div id="productCard" data-product-id="P1001">商品信息</div> <script> const productId = "P1001"; const element = document.getElementById("productCard"); element.dataset.productId = productId; // 设置值 console.log(element.dataset.productId); // 读取值 </script>

关键注意事项

作用域问题
- 内联事件中引用的变量必须是全局作用域
- 推荐使用模块化开发避免污染全局命名空间
XSS防护

function escapeHtml(str) { return str.replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>'); }
执行时机控制
使用事件监听确保DOM就绪：
document.addEventListener("DOMContentLoaded", () => { // 在此操作DOM });
性能优化
- 避免在循环中频繁操作DOM
- 复杂更新使用文档片段（DocumentFragment）