为何浏览器生成两个id="felt"的div？HTML代码仅声明一个

云原生阿岚

2026-5-25

排查ID重复出现的问题

嘿，我来帮你捋捋这个奇怪的问题！明明HTML里只写了一个id="felt"的元素，浏览器里却冒出来两个，这种情况我碰到过好几次，通常是这几个原因导致的，咱们一步步排查：

可能的原因及解决方法

JavaScript动态生成了重复元素
你正在学JS，大概率是你的代码里不小心创建了第二个带id="felt"的元素。比如用document.createElement手动创建元素时重复设置了ID，或者用innerHTML插入了包含该ID的HTML片段。可以检查下你的JS代码里有没有类似这样的写法：
```
// 示例：不小心生成了重复ID的元素
const duplicateFelt = document.createElement('div');
duplicateFelt.id = 'felt';
document.body.appendChild(duplicateFelt);
```
找到这类代码后，把新元素的ID改成别的（比如felt-secondary）就行。
HTML里藏着你没注意到的重复代码
有时候我们会在隐藏的容器、template标签或者注释后面不小心重复写了相同ID的元素。你可以按下Ctrl+U打开页面原始源代码（不是开发者工具的Elements面板），用搜索功能找id="felt"，看看是不是真的只有一处。
浏览器插件搞的鬼
有些页面美化、广告拦截类的插件会偷偷修改页面DOM，偶尔会导致重复元素出现。你可以试试用浏览器的无痕模式打开页面，如果这时候只有一个id="felt"元素，那就是某个插件在捣乱，禁用可疑插件就行。
模板/框架的重复渲染（如果有用的话）
如果你在用Vue、React这类框架或者模板引擎，可能是循环、条件渲染的逻辑出错了，导致组件被渲染了两次。比如Vue里v-for没设置唯一的key，或者条件判断写反了，都可能触发重复渲染。