Javascript 使用DOM操纵的Append元素无法使用querySelector循环

我试图循环使用DOM操纵创建的元素。它成功地反映在html页面中，但当我使用queryselector在其中循环时，它没有循环。我还尝试使用getElementByClassName，但仍然没有循环

下面是我要指出的代码部分：

我还附上了完整的javascript代码和html供参考：

const selected=document.querySelector（“.selected”）；
const options container=document.querySelector（“.options container”）；
window.addEventListener（'DOMContentLoaded'，（）=>{
createNewOption1（）；
createNewOption2（）；
});
const optionsList=document.querySelectorAll（“.option”）；
已选定。addEventListener（“单击”，（）=>{
选项container.classList.toggle（“活动”）；
});
选项列表。forEach（o=>{
o、 addEventListener（“单击”，（）=>{
selected.innerHTML=o.querySelector（“标签”）.innerHTML；
选项container.classList.remove（“活动”）；
});
});
const createNewOption1=（）=>{
const div1=document.createElement（'div'）；
const input1=document.createElement（'input'）；
const label1=document.createElement（'label'）；
div1.className='option'；
input1.type='radio'；
input1.className='radio'；
input1.name='category'；
label1.htmlFor=‘返老还童’；
label1.innerHTML=‘回春集’；
第1部分。追加子项（输入1）；
第1部分附属物（标签1）；
optionContainer.appendChild（div1）；
}
const createNewOption2=（）=>{
const div2=document.createElement（'div'）；
const input2=document.createElement（'input'）；
const label2=document.createElement（'label'）；
div2.className='option'；
input2.type='radio'；
input2.className='radio'；
input2.name='category'；
label2.htmlFor=‘维护’；
label2.innerHTML=‘维护集’；
第2部分。追加子项（输入2）；
第2部分：附属物（标签2）；
optionContainer.appendChild（第2部分）；
}

数据库项目
销售额
选择项

您正在

DOMContentLoaded

事件侦听器中创建选项。但是您正在侦听器外部调用

querySelectorAll（“.option”）

，因此这些选项还不存在。将该代码移到侦听器中

const selected=document.querySelector（“.selected”）；
const options container=document.querySelector（“.options container”）；
window.addEventListener（'DOMContentLoaded'，（）=>{
createNewOption1（）；
createNewOption2（）；
const optionsList=document.querySelectorAll（“.option”）；
选项列表。forEach（o=>{
o、 addEventListener（“单击”，（）=>{
selected.innerHTML=o.querySelector（“标签”）.innerHTML；
选项container.classList.remove（“活动”）；
});
});
});
已选定。addEventListener（“单击”，（）=>{
选项container.classList.toggle（“活动”）；
});
const createNewOption1=（）=>{
const div1=document.createElement（'div'）；
const input1=document.createElement（'input'）；
const label1=document.createElement（'label'）；
div1.className='option'；
input1.type='radio'；
input1.className='radio'；
input1.name='category'；
label1.htmlFor=‘返老还童’；
label1.innerHTML=‘回春集’；
第1部分。追加子项（输入1）；
第1部分附属物（标签1）；
optionContainer.appendChild（div1）；
}
const createNewOption2=（）=>{
const div2=document.createElement（'div'）；
const input2=document.createElement（'input'）；
const label2=document.createElement（'label'）；
div2.className='option'；
input2.type='radio'；
input2.className='radio'；
input2.name='category'；
label2.htmlFor=‘维护’；
label2.innerHTML=‘维护集’；
第2部分。追加子项（输入2）；
第2部分：附属物（标签2）；
optionContainer.appendChild（第2部分）；
}

数据库项目
销售额
选择项

谢谢！它起作用了！