JavaScript中的 innerHTML 字符与变量拼接赋值

最新推荐文章于 2025-05-30 13:20:12 发布

原创最新推荐文章于 2025-05-30 13:20:12 发布 · 8.5k 阅读

4 ·

CC 4.0 BY-SA版权

本文为acoolgiser原创文章，转载请贴上原文链接。（公众号：acoolgiser）

文章标签：

#JavaScript #innerHTML #字符变量拼接

JS 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了在HTML中使用JavaScript进行字符串与变量拼接的方法，包括如何正确显示整型变量，通过parseInt()函数确保变量正常转换为字符串进行拼接。

如图，在html中有一个div，给其设置文本：字符串与变量的拼接

代码：

<body>
    <div id='divtest'></div>
</body>
<script>
    var dis = 34;
    document.getElementById('divtest').innerHTML = "test" + dis;        //这里注意变量的拼接
    document.getElementById('divtest').innerHTML += "test2" + (dis+1);  //这里注意变量的拼接
</script>

注意这样写只会显示字符串，整型变量无法显示，要改成 parseInt(dis) ，才能达到如图的效果。

<body>
    <div id='divtest'></div>
</body>
<script>
    var dis = 34;
    document.getElementById('divtest').innerHTML = "test" + parseInt(dis);        //这里注意变量的拼接
    document.getElementById('divtest').innerHTML += "test2" + parseInt(dis+1);    //这里注意变量的拼接
</script>