如何在原生JS的forEach函数中正确使用LaTeX语法？

你的问题核心是动态插入的数学公式字符串没有被渲染引擎识别处理——直接写在HTML里的公式能正常显示，说明你用了MathJax、KaTeX这类数学渲染工具，但这类工具默认只在页面初始加载时扫描并渲染一次DOM内容。当你通过innerHTML动态添加新内容后，渲染引擎并没有自动重新解析这些新插入的字符串，所以它们只会以纯文本形式展示。

下面分两种常见渲染工具给出解决方法：

方法1：使用MathJax时的修复 #

如果你的项目用的是MathJax，只需要在动态插入内容后，调用MathJax的重新排版方法，让它扫描新添加的DOM元素：

const container = document.querySelector("#examples-container");
examples.forEach((ex, i) => {
  const example = `
    <div class="card">
      <div class="example">
        ${ex.question}
      </div>
      <button type="button" class="toggle" onclick="toggle(${i})">
        Toggle
      </button>
      <div id="result_${i}" style="display:none" class="result">${ex.answer}</div>
    </div>`;
  container.innerHTML += example;
});

// 动态插入完成后，调用MathJax重新渲染
if (window.MathJax) {
  MathJax.typesetPromise([container]).catch(err => console.error(err));
}

注意：不同版本的MathJax调用方式可能略有差异，比如旧版本可能用MathJax.Hub.Queue(["Typeset", MathJax.Hub, container])，请根据你使用的版本调整。

方法2：使用KaTeX时的修复 #

如果用的是KaTeX，更推荐直接在创建元素时手动渲染公式，而不是依赖后续扫描：

const container = document.querySelector("#examples-container");
examples.forEach((ex, i) => {
  // 创建卡片容器
  const card = document.createElement('div');
  card.className = 'card';

  // 创建公式容器并渲染
  const exampleDiv = document.createElement('div');
  exampleDiv.className = 'example';
  // 用KaTeX渲染公式到exampleDiv中
  katex.render(ex.question, exampleDiv, {
    throwOnError: false // 忽略渲染错误，避免页面崩溃
  });
  card.appendChild(exampleDiv);

  // 创建toggle按钮
  const toggleBtn = document.createElement('button');
  toggleBtn.type = 'button';
  toggleBtn.className = 'toggle';
  toggleBtn.textContent = 'Toggle';
  toggleBtn.onclick = () => toggle(i);
  card.appendChild(toggleBtn);

  // 创建结果容器并渲染答案
  const resultDiv = document.createElement('div');
  resultDiv.id = `result_${i}`;
  resultDiv.className = 'result';
  resultDiv.style.display = 'none';
  katex.render(ex.answer, resultDiv, {
    throwOnError: false
  });
  card.appendChild(resultDiv);

  // 将卡片添加到容器
  container.appendChild(card);
});

额外提示 #

• 避免频繁使用innerHTML +=，这种方式会重新解析整个容器的DOM，性能较差，推荐使用createElement+appendChild的方式（如KaTeX示例）。
• 如果你的渲染工具不是上述两种，核心思路都是一样的：动态插入内容后，手动触发渲染引擎对新元素的解析。

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