如何在页面上显示JS中的变量值，以及JS中value/innerText/innerHTML三个属性的区别

本文链接：https://blog.youkuaiyun.com/github_37421511/article/details/84345848

本文介绍在网页上显示JavaScript变量的两种方法：document.write()和innerHTML。并通过实例对比value、innerText与innerHTML属性，解析其在获取和设置元素内容时的不同表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面上显示JS中的变量值

想要在页面上显示JavaScript中定义的变量值，查到两种方法：

一是通过document.write()；二是在页面节点上显示

<div id='div'></div>
<script>
	var a="123";//以下为两种在页面上显示变量值的方式
	document.write(a);//1、页面上显示a的值“123”
	document.getElementById('div').innerHTML = a;//2、在div节点上显示
</script>

以上代码可以放在<body>中直接运行，需要注意的一点是：没有写在函数中的JS代码，在HTML中的执行顺序是从上至下；如果将其放在<head>中，第二处 DOM 获取不到<body>中“div”的 id 。

后一种实现方法需要在想要显示的位置，添加对应HTML语言标记。此处用的是div标签，但自己之前没有了解过innerHTML（html 中 DOM节点的一个属性，使用该方法可以获取元素的内容，然后在对其进行操作（改变），其中 HTML 均为大写），而比较熟悉的是表单的value属性，这个也是可以用来实现以上需求的。

JS中value/innerText/innerHTML三个属性的区别

以上三者均能实现双向功能，即获取对象的内容或向对象插入内容，以上代码中实现的就是插入（也可以替换）功能。

三者的具体用法和异同如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
input value：<input id="value" type="text" style="border:0px;" value="This is a <b>String</b>"/><br/><br/>
innerText  ：<span id="innerText">This is a <b>String</b></span><br/><br/>
innerHTML：<span id="innerHTML">This is a <b>String</b></span><br/><br/>
<input id="replace" type="button" value="replace" onclick="replace()"/>
<script >
    var iv=document.getElementById("value");
    var it=document.getElementById("innerText");
    var ih=document.getElementById("innerHTML");
    var content="Replaced by a <b>Tag</b>";
    alert("input value："+iv.value+"\n" +
        "innerText   ："+it.innerText+"\n" +
        "innerHTML："+ih.innerHTML);
    function replace() {
        iv.value=content;
        it.innerText=content;
        ih.innerHTML=content;
    }
</script>
</body>
</html>