为何动态创建的li元素调用setAttribute设置id无效？

你的代码其实能把main-heading这个id加到新创建的li上，但问题出在HTML的基础规则：整个文档里id必须是唯一的。页面里的h1已经用了main-heading这个id，这种重复写法不符合规范，而且会导致后续用document.getElementById('main-heading')或者querySelector('#main-heading')只能找到第一个带这个id的元素（也就是h1），这可能让你误以为li的id没设置成功。

怎么解决 #

1. 使用唯一id：给新li换个独有的id，比如x-men-item：

   const ul = document.querySelector('ul');
   const li = document.createElement('li');
   ul.append(li);
   li.innerText = 'X-Men';
   li.setAttribute('id', 'x-men-item');
   

2. 若需共享样式用class：要是你想让li和h1用一样的样式，别用重复id，用class类名更合适：

   • 先给h1添加class：

     <h1 id="main-heading" class="common-style">Favorite Movie Franchise</h1>
     

   • 再给li添加同一个class：

     li.classList.add('common-style');
     

验证id是否已设置 #

你可以在浏览器控制台执行以下代码，查看最后一个li的id属性：

document.querySelector('li:last-child').id;

如果返回main-heading，说明id已经被设置上了，只是重复id的问题让你产生了“未生效”的错觉。

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