如何为动态加载的id="markdown"的div调用markdownit()？

首先，把渲染Markdown的逻辑封装成可复用函数，方便在不同场景下调用：

function renderMarkdown() {
  const md = window.markdownit();
  const markdownDiv = document.getElementById('markdown');
  if (markdownDiv) {
    const content = markdownDiv.innerHTML;
    markdownDiv.innerHTML = md.render(content);
  }
}

方法一：动态加载完成后手动触发 #

如果是用户操作（比如点击按钮、提交表单）触发div的动态加载，直接在加载完成的回调里调用上述函数即可。比如AJAX加载场景：

// 示例：动态加载内容并渲染Markdown
function loadDynamicContent() {
  fetch('/your-content-api')
    .then(res => res.text())
    .then(html => {
      // 将动态内容插入页面
      document.body.insertAdjacentHTML('beforeend', html);
      // 内容插入后立即渲染Markdown
      renderMarkdown();
    });
}

如果用前端框架（如Vue/React），就在组件挂载完成的钩子（React的useEffect、Vue的mounted）里调用renderMarkdown。

方法二：自动监听DOM变化（MutationObserver） #

如果无法确定动态加载时机，可通过MutationObserver监听DOM树变化，当id为markdown的元素被添加时自动渲染：

window.onload = function() {
  // 先处理页面初始存在的元素
  renderMarkdown();

  // 创建DOM变化观察者
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const targetDiv = document.getElementById('markdown');
        // 标记已渲染，避免重复处理
        if (targetDiv && !targetDiv.dataset.rendered) {
          renderMarkdown();
          targetDiv.dataset.rendered = 'true';
        }
      }
    });
  });

  // 配置监听选项：监听整个文档的子节点变化
  observer.observe(document.body, { childList: true, subtree: true });
};

注意事项 #

• id具有唯一性，用getElementById比类选择器更高效，无需循环处理多个元素；
• 若需处理多个动态Markdown元素，可将函数改为接受元素参数，或改用class选择器配合监听逻辑。

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