为何使用insertAdjacentHTML插入元素后，同类元素length值未变化？

给你列几个最可能的原因和对应的解决办法：

1. 选择器语法错误 #

你写的document.querySelectorAll(.choice)是错误写法——CSS选择器必须用引号包裹，要改成document.querySelectorAll('.choice')才行。如果没加引号，JS会把.choice当成变量而非选择器，要么直接报错，要么拿到空集合，自然长度不对。

2. 查询时机不对 #

querySelectorAll返回的是静态NodeList，也就是创建那一刻的元素快照，不会自动同步后续新增的元素。如果你在调用insertAdjacentHTML之前就执行了查询，拿到的只是初始的元素集合，新增元素不会被包含进去。必须在插入元素之后再执行查询。

比如正确的代码顺序：

// 先插入新元素
const container = document.querySelector('div');
container.insertAdjacentHTML('beforeend', '<span class="choice">新选项</span>');
// 插入后再查询数量
const choiceCount = Array.from(document.querySelectorAll('.choice')).length;
console.log(choiceCount); // 这里会显示更新后的数量

3. 插入的元素class名写错了 #

检查你用insertAdjacentHTML插入的HTML字符串，比如是不是把class="choice"写成了class="choise"（拼写错误），或者大小写不一致（比如Choice）。这种情况下页面上能看到元素，但class不匹配，querySelectorAll自然找不到这些元素。

快速排查技巧 #

打开浏览器控制台（按F12），直接输入document.querySelectorAll('.choice').length，看实时返回的数量。如果这个数量是对的，那就是你代码里的查询时机或语法问题；如果这个数量也不对，那肯定是插入的元素class存在拼写/大小写错误。

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