本文介绍一种高效、可扩展的 javascript 方法，用于生成带答案的随机数学题（加减乘除），避免重复 dom 操作，遵循 dry 原则，并通过单一函数灵活支持不同运算类型与难度级别。

在教学或练习场景中，自动生成带答案的算术题（如 234 + 567 = 801）既需保证题目与答案严格对应，又需兼顾代码可维护性与可扩展性。原始代码中将 innerHTML += ... 在循环内反复调用，不仅性能低下（触发多次重排重绘），还因变量作用域和执行时序问题导致答案错位。更关键的是，它硬编码了“加法”，无法适配减法、乘法或除法等需求。

以下是一个优化后的解决方案——单函数、多运算、一次渲染、语义化结构：

const createWorksheet = (selector, totalQuestions = 10, difficulty = 100, operator = "+") => {
  const elCol = document.querySelector(selector);
  if (!elCol) {
    console.warn(`Element not found for selector: ${selector}`);
    return;
  }

  const generateNumber = () => Math.floor(Math.random() * difficulty) + 100;
  let html = "";

  for (let i = 0; i < totalQuestions; i++) {
    const a = generateNumber();
    const b = generateNumber();
    let ans, expression;

    switch (operator) {
      case "+":
        ans = a + b;
        expression = `${a} + ${b}`;
        break;
      case "-":
        // 确保减法结果非负（可选逻辑）
        const [minuend, subtrahend] = a >= b ? [a, b] : [b, a];
        ans = minuend - subtrahend;
        expression = `${minuend} − ${subtrahend}`;
        break;
      case "*":
        ans = a * b;
        expression = `${a} × ${b}`;
        break;
      case "/":
        // 避免除零，确保整除（提升可读性）
        const dividend = a * b; // 构造整除：dividend / b === a
        ans = a;
        expression = `${dividend} ÷ ${b}`;
        break;
      default:
        throw new Error(`Unsupported operator: ${operator}`);
    }

    html += `${expression} = ${ans}`;
  }

  elCol.innerHTML = html;
};

使用示例（支持不同难度与运算）：

createWorksheet("#column-easy",   10, 10,   "+");   // 简单加法（100–110 范围）
createWorksheet("#column-medium", 10, 100,  "*");   // 中等乘法
createWorksheet("#column-difficult", 10, 1000, "/"); // 较难整除题

配套 CSS（替代冗余
，增强可维护性）：

.calc {
  padding: 0.6rem 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}
.calc:last-child {
  border-bottom: none;
}

HTML 结构建议（语义清晰、便于样式控制）：

基础加法


进阶乘法


挑战除法

✅ 关键优势总结：

• ✅ 答案精准绑定：每个 expression 与 ans 在同一循环迭代中计算并拼接，杜绝“答案错题”；
• ✅ 一次 DOM 写入：累积 HTML 字符串后统一赋值 innerHTML，大幅提升性能；
• ✅ 运算符可插拔：通过 operator 参数解耦逻辑，轻松扩展 -、*、/，甚至可加入 % 或幂运算；
• ✅ 难度与数量参数化：difficulty 控制数值范围，totalQuestions 控制题量，复用性极强；
• ✅ 健壮性增强：包含元素存在性检查、非法运算符报错、减法非负保障、除法整除构造等实用细节。

? 提示：若需生成「填空式」题目（如 234 + 567 = ____），只需将 ${ans} 替换为 ____，并在后续添加答案验证逻辑——此函数已为教学工具链打下坚实基础。