如何通过类名将JavaScript变量批量填充到HTML元素中？

AI 小北

2026-8-16

解决方案

下面是几个适合新手的原生JS实现方法，能帮你把变量x的值批量赋值给多个元素：

方法一：使用`querySelectorAll` + `forEach`（推荐）

这是现代浏览器最常用的方式，代码简洁易读：

<div>
    <h1>Title</h1>
    <!-- 现在所有span都会显示x的值 -->
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
</div>
<script>
    var x = 100;
    // 获取所有class为value-of-x的元素
    const valueElements = document.querySelectorAll('.value-of-x');
    // 遍历每个元素，把x的值赋值进去
    valueElements.forEach(element => {
        element.textContent = x; // 用textContent比innerHTML更安全，适合纯文本场景
    });
</script>

注意：用textContent代替innerHTML更安全，尤其是当x是用户输入内容时，能避免XSS风险；如果需要插入HTML内容再用innerHTML。

方法二：兼容老浏览器的`getElementsByClassName` + for循环

如果需要支持IE8这类老浏览器，可以用这个方法：

<div>
    <h1>Title</h1>
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
    <p>Value of x: <span class="value-of-x"></span></p>
</div>
<script>
    var x = 100;
    // 获取所有class为value-of-x的元素集合
    var valueElements = document.getElementsByClassName('value-of-x');
    // 用普通for循环遍历赋值
    for (var i = 0; i < valueElements.length; i++) {
        valueElements[i].textContent = x;
    }
</script>