如何修改逻辑实现带指定id的HTML元素在页面多处插入都正常生效

• HTML规范要求id属性全局唯一，同一页面不允许出现多个相同id的元素
• document.getElementById()方法仅会返回页面中第一个匹配对应id的DOM元素，因此后续同id元素不会被选中
• 现有HTML代码存在结构错误：<div>属于页面内容类元素，禁止放在<head>标签内，必须移入<body>标签才会正常渲染

第一步：修改HTML元素属性与结构 #

将所有需要重复插入的元素，从id="example"改为class="example"（class属性支持重复赋值），同时将所有内容元素移入body标签内，修正后的完整HTML示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 可在body任意位置插入多个class为example的div -->
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>

    <script src="app.js"></script>
</body>
</html>

第二步：修改JS逻辑实现批量赋值 #

修改app.js代码，选中所有class为example的元素后遍历逐个设置内容：

// 选中所有class为example的元素
const exampleElements = document.querySelectorAll('.example');
// 遍历每个元素设置内容
exampleElements.forEach(el => {
    el.innerHTML = "ax-max";
});

内容的提问来源于stack exchange，提问作者amr