如何在Markdown中实现点击按钮查看表格的功能？

问题根源在于：Markdown是在页面加载前被转换为HTML的，页面加载完成后，你通过JavaScript插入的Markdown语法文本，浏览器不会自动将其重新解析为HTML元素，只会当作纯文本显示。

可行实现方法：直接插入HTML表格 #

既然innerHTML识别的是HTML而非Markdown，你可以直接把表格的HTML代码写入innerHTML，这样浏览器会直接渲染出表格：

<button onclick="myFunction()">Output</button>
<div id="output"></div>

<script>
function myFunction() {
  document.getElementById("output").innerHTML = `
    <div class="s-table-container">
      <table class="s-table">
        <thead>
          <tr>
            <th style="text-align: center;">total_records</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="text-align: center;">44301</td>
          </tr>
        </tbody>
      </table>
    </div>
  `;
}
</script>

补充说明 #

• 如果你用的是支持动态Markdown渲染的工具（如某些静态站点生成器、Notion嵌入等），可以调用对应工具的Markdown解析API来转换文本，但纯静态HTML场景下，直接插入HTML是最可靠的方式。
• 你之前尝试的单行纯文本能正常显示，是因为纯文本不需要额外解析，浏览器直接渲染即可；而Markdown表格需要先转成HTML才能被识别。

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