JavaScript动态创建按钮设置ID失效，是否受父级section已有ID影响？

父节点设置ID不会对其子元素的ID设置造成任何影响，ID是DOM元素的独立属性，父子元素的ID之间不存在冲突规则，仅要求同一文档内的ID全局唯一即可。你使用的两种ID设置写法都是符合规范的正确写法，失效和父节点ID无关。

常见失效原因 #

• 未获取到正确的按钮元素引用：你在执行ID赋值操作时，buttonElementBlokkeer对应的DOM元素还未完成创建，或者你获取元素的选择器匹配错误，拿到了null/非目标元素，赋值自然不会生效。
• 赋值后被其他逻辑覆盖：设置ID的代码执行后，后续有其他JS逻辑修改了该按钮的ID，或是直接销毁重建了该按钮元素，导致之前的赋值被覆盖。
• 同页面存在重复ID：如果buttonBlokkeer已经被页面内其他元素占用，部分浏览器的DOM渲染会出现异常，但该场景通常不会导致ID赋值失败，只会影响后续getElementById等方法的查询结果。
• Shadow DOM操作异常：如果目标按钮在Shadow DOM节点内部，你拿到的是外部Light DOM的元素引用的话，赋值操作不会作用到目标按钮上。

排查方案 #

你可以在ID赋值代码后增加调试日志，验证赋值是否即时生效：

// 执行你的赋值逻辑
buttonElementBlokkeer.id = "buttonBlokkeer"
// 打印验证
console.log('当前按钮ID为：', buttonElementBlokkeer.id)
console.log('通过ID查询到的元素：', document.getElementById('buttonBlokkeer'))

如果打印结果显示ID是正确的，但是页面实际元素ID不符合，说明赋值后有其他逻辑修改了元素；如果打印结果不符合预期，说明你获取的buttonElementBlokkeer元素引用本身存在问题。

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