本文介绍如何使用 javascript 动态渲染问卷题目及对应选项，摆脱硬编码选项数量的限制，通过遍历 `questions[count].option` 数组灵活生成 `
在构建网页问卷时，若每个问题的选项数量不固定（例如有的题有 2 个选项，有的有 5 个），硬编码 <li> 标签（如 first/second/third/fourth）不仅难以维护，还会导致新增或删减选项时频繁修改逻辑。正确做法是将选项视为数组，并用循环动态生成 DOM 结构。
首先确保你的问卷数据结构合理，例如：
const questions = [
{
question: "你最喜欢的颜色？",
options: ["红色", "蓝色", "绿色"]
},
{
question: "编程语言偏好？",
options: ["JavaScript", "Python", "Rust", "Go", "TypeScript"]
}
];接着，在渲染当前题目时，不再解构固定数量的变量，而是直接遍历 questions[count].options（注意：原答案中误写为 questions[count].question，应为 .options）：
const q = questions[count];
let html = `<h2>Q${count + 1}. ${q.question}</h2>
<ul class="option_group">`;
for (const option of q.options) {
html += `<li class="option">${option}</li>`;
}
html += '</ul>';
question.innerHTML = html;✅ 关键修正与优化说明：
- ✅ 循环对象必须是 q.options（选项数组），而非 q.question（题目字符串）；
- ✅ 使用 for...of 更语义清晰，也可替换为 q.options.map(...).join('') 实现函数式写法：
const optionsHtml = q.options
.map((opt, idx) => `<li class="option" data-index="${idx}">${opt}</li>`)
.join('');
question.innerHTML = `
<h2>Q${count + 1}. ${q.question}</h2>
<ul class="option_group">${optionsHtml}</ul>
`;? 进阶建议：
- 为每个 <li> 添加 data-index 属性，便于后续绑定点击事件并获取用户选择；
- 使用 textContent 替代模板字符串插值可防范 XSS（若选项内容来自不可信来源）；
- 考虑封装为独立函数，提升复用性：
function renderQuestion(container, questionObj, index) {
const optionsHtml = questionObj.options
.map((opt, i) => `<li class="option" data-value="${i}">${opt}</li>`)
.join('');
container.innerHTML = `
<h2>Q${index + 1}. ${questionObj.question}</h2>
<ul class="option_group">${optionsHtml}</ul>
`;
}这样，无论每道题配置多少个选项，代码均能自动适配——真正实现「一次编写，多场景复用」。
