本文介绍如何使用纯前端 javascript 动态添加题目区块，避免 php 服务端混淆渲染逻辑，确保“新增题目”按钮实时、可靠地向表单追加结构完整、命名规范的题目组（含题干、4个答案及正确选项复选框）。
本文介绍如何使用纯前端 javascript 动态添加题目区块，避免 php 服务端混淆渲染逻辑，确保“新增题目”按钮实时、可靠地向表单追加结构完整、命名规范的题目组（含题干、4个答案及正确选项复选框）。
在构建在线测验系统（如 PHP 后端驱动的出题页面）时，一个常见需求是：初始仅显示 1 道题目，用户点击「新增题目」按钮后，客户端即时生成并插入一道结构相同的新题目，且各题字段 name 属性需唯一（如 q1, a1_1, correctA1），以保障表单提交后 PHP 能准确解析全部数据。
⚠️ 原始代码的问题根源在于：将 HTML 字符串硬编码在 onclick 属性中，既违反 HTML/JS 分离原则，又因 PHP 变量 $questionNum 在服务端已静态求值（如输出时为 2），导致按钮未点击就渲染了第二题；更严重的是，onclick 中无法执行 DOM 插入操作——它只是字符串拼接，不是合法 JS 语句。
✅ 正确解法：完全交由前端 JavaScript 控制动态 DOM 操作，PHP 仅负责初始渲染第一题 + 提供基础结构。以下是完整、可直接运行的实现方案：
✅ 推荐实现（HTML + JavaScript）
<!DOCTYPE html>
<html>
<head>
<title>动态测验表单</title>
<style>
.question-group { margin: 1.5em 0; padding: 12px; border-left: 3px solid #4CAF50; background-color: #f9f9f9; }
.question-group h3 { margin-top: 0; color: #2E7D32; }
</style>
</head>
<body>
<form method="post" id="quizForm">
<!-- 初始题目 -->
<div class="question-group" data-index="1">
<h3>题目 1</h3>
<p>题干：<input type="text" name="q1" placeholder="请输入题干" required></p>
<p>答案 1：<textarea name="a1_1" placeholder="答案 1" required wrap="hard"></textarea>
<label><input type="checkbox" name="correctA[]" value="a1_1"> 设为正确答案</label></p>
<p>答案 2：<textarea name="a1_2" placeholder="答案 2" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a1_2"> 设为正确答案</label></p>
<p>答案 3：<textarea name="a1_3" placeholder="答案 3" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a1_3"> 设为正确答案</label></p>
<p>答案 4：<textarea name="a1_4" placeholder="答案 4" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a1_4"> 设为正确答案</label></p>
</div>
<!-- 「新增题目」按钮 -->
<button type="button" id="addQuestionBtn">➕ 新增题目</button>
<br><br>
<button type="submit">提交测验</button>
</form>
<script>
let questionIndex = 1; // 当前已存在题目数（初始为1）
document.getElementById('addQuestionBtn').addEventListener('click', function() {
questionIndex++;
// 构建新题目 HTML（注意 name 属性带唯一索引）
const newQuestionHtml = `
<div class="question-group" data-index="${questionIndex}">
<h3>题目 ${questionIndex}</h3>
<p>题干：<input type="text" name="q${questionIndex}" placeholder="请输入题干" required></p>
<p>答案 1：<textarea name="a${questionIndex}_1" placeholder="答案 1" required wrap="hard"></textarea>
<label><input type="checkbox" name="correctA[]" value="a${questionIndex}_1"> 设为正确答案</label></p>
<p>答案 2：<textarea name="a${questionIndex}_2" placeholder="答案 2" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a${questionIndex}_2"> 设为正确答案</label></p>
<p>答案 3：<textarea name="a${questionIndex}_3" placeholder="答案 3" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a${questionIndex}_3"> 设为正确答案</label></p>
<p>答案 4：<textarea name="a${questionIndex}_4" placeholder="答案 4" required></textarea>
<label><input type="checkbox" name="correctA[]" value="a${questionIndex}_4"> 设为正确答案</label></p>
</div>
`;
// 插入到表单末尾（按钮上方）
const form = document.getElementById('quizForm');
const addBtn = document.getElementById('addQuestionBtn');
form.insertBefore(new DOMParser().parseFromString(newQuestionHtml, 'text/html').body.firstChild, addBtn);
});
</script>
</body>
</html>? 关键设计说明
- 命名规范统一：每道题的题干为 qN，答案字段为 aN_1 ~ aN_4，正确选项统一用 correctA[] 数组接收（PHP 后端通过 $_POST['correctA'] 获取所有被勾选的值）。
- DOM 安全插入：使用 DOMParser 解析动态 HTML 字符串，避免 innerHTML 的潜在 XSS 风险（若内容含用户输入需额外转义）。
- 结构可维护：每个题目包裹在 .question-group 容器中，便于后续添加删除功能（如增加「移除」按钮）或样式控制。
- 无需刷新 / 不依赖 PHP 计数：questionIndex 完全由前端维护，彻底规避服务端变量混淆问题。
? 后端接收建议（PHP 示例）
// 处理提交的测验数据
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$questions = [];
$i = 1;
while (!empty($_POST["q$i"])) {
$questions[] = [
'question' => $_POST["q$i"],
'answers' => [
$_POST["a{$i}_1"] ?? '',
$_POST["a{$i}_2"] ?? '',
$_POST["a{$i}_3"] ?? '',
$_POST["a{$i}_4"] ?? ''
],
'correct' => $_POST['correctA'] ?? []
];
$i++;
}
// …保存到数据库等逻辑
}? 提示：若需支持「删除题目」，只需为每个 .question-group 添加 <button type="button" class="remove-btn">?️ 删除</button>，并绑定事件调用 element.remove() 即可。动态表单的核心在于——结构由 JS 创建，语义由 name 属性定义，数据由标准 POST 提交。
