使用innerHTML插入div时如何为每个新元素分配唯一id值

这个需求完全可以实现，只要在每次拼接HTML字符串时，动态替换id属性的取值为唯一标识即可。

方案1：闭包维护自增计数器（推荐，同页面内绝对无重复） #

用立即执行函数包裹计数器变量，不会污染全局命名空间，每次调用函数时计数器自增，拼接固定前缀生成唯一id：

const dynamicSet = (() => {
  let count = 0;
  return function () {
    const uniqueId = `intro_${count++}`;
    // 原代码未闭合div标签，此处已补全结构
    introNewSection.innerHTML += `<div class="col-lg-5 mb-lg-0 mb-4" id="${uniqueId}"></div>`;
    return uniqueId;
  }
})();

调用效果：

• 第一次调用dynamicSet()，生成的div id为intro_0
• 第二次调用生成id为intro_1，后续依次递增，不会重复

方案2：时间戳+随机数（无需维护计数器） #

如果不想维护计数变量，也可以用时间戳加随机数生成id，重复概率极低，哪怕页面刷新重新执行也不会和之前生成的id撞名：

function dynamicSet() {
  const uniqueId = `intro_${Date.now()}_${Math.trunc(Math.random() * 1000)}`;
  introNewSection.innerHTML += `<div class="col-lg-5 mb-lg-0 mb-4" id="${uniqueId}"></div>`;
}

注意：你贴出的原始代码中，拼接的div标签没有写闭合标签</div>，实际运行会导致DOM结构解析异常，不管用哪种id生成方案都要记得补全闭合标签。

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