在HTML中显示JavaScript（JS）变量有多种方法,以下是一些常见的方法和步骤：
使用innerHTML属性
这是最直接的方法，通过JavaScript修改HTML元素的innerHTML属性来显示变量。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">Display Variable</title>
</head>
<body>
<div id="output"></div>
<script>
var myVar = "Hello, World!";
document.getElementById("output").innerHTML = myVar;
</script>
</body>
</html>
使用textContent属性
与innerHTML类似，但textContent不会解析HTML标签,只显示文本内容。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">Display Variable</title>
</head>
<body>
<div id="output"></div>
<script>
var myVar = "Hello, World!";
document.getElementById("output").textContent = myVar;
</script>
</body>
</html>
使用innerText属性
innerText与textContent类似，但在某些浏览器中可能存在差异，通常推荐使用textContent。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">Display Variable</title>
</head>
<body>
<div id="output"></div>
<script>
var myVar = "Hello, World!";
document.getElementById("output").innerText = myVar;
</script>
</body>
</html>
使用DOM操作
通过创建新的DOM元素，并将其插入到页面中,也可以显示变量。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">Display Variable</title>
</head>
<body>
<div id="output"></div>
<script>
var myVar = "Hello, World!";
var newElement = document.createElement("p");
newElement.textContent = myVar;
document.getElementById("output").appendChild(newElement);
</script>
</body>
</html>
使用模板字符串
ES6引入的模板字符串可以方便地插入变量。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">Display Variable</title>
</head>
<body>
<div id="output"></div>
<script>
var myVar = "Hello, World!";
document.getElementById("output").innerHTML = `<p>${myVar}</p>`;
</script>
</body>
</html>
| 方法 | 描述 | 示例代码 |
|---|---|---|
innerHTML |
修改HTML元素的内部HTML内容 | document.getElementById("output").innerHTML = myVar; |
textContent |
修改HTML元素的文本内容，不解析HTML标签 | document.getElementById("output").textContent = myVar; |
innerText |
修改HTML元素的文本内容，不解析HTML标签 | document.getElementById("output").innerText = myVar; |
| DOM操作 | 创建新的DOM元素，并将其插入到页面中 | var newElement = document.createElement("p"); newElement.textContent = myVar; document.getElementById("output").appendChild(newElement); |
| 模板字符串 | 使用ES6模板字符串插入变量 | document.getElementById("output").innerHTML =
${myVar} |
FAQs
Q1：为什么使用innerHTML而不是textContent？
A1：innerHTML可以插入HTML标签，而textContent只插入文本内容，如果需要插入HTML标签，则应使用innerHTML。
Q2：如何避免XSS攻击？
A2：当使用innerHTML或模板字符串插入变量时，应确保变量内容不包含HTML标签或特殊字符，可以使用textContent或HTML实体编码来避免XSS攻击。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/147266.html
