如何缩短jQuery .load()代码并合并div解决Markdown转换异常问题

问题原因 #

问题出在innerText的取值规则上：

• 浏览器对可见元素和不可见元素的innerText处理逻辑完全不同：你之前用的隐藏input容器设置了display: none，这种元素的innerText会完整保留原始文本的换行、空白符，拿到的是格式正确的Markdown原文，convert函数可以正常解析。
• 替换成可见的content容器后，可见元素的innerText会对齐渲染结果，自动合并连续空白符、折叠换行，Markdown里用于区分标题、段落的换行边界直接被抹除。convert函数拿到丢失了段落分隔的连续文本，就会把标题后的内容全部识别为标题的一部分，最终出现嵌套错误。

最优解决方案 #

完全不需要把Markdown文本先写入DOM再读取，直接用$.get加载纯文本内容，转换后直接写入容器，代码更短也完全规避格式丢失问题：

$(document).ready(function() {
  $.get("convertme.md", function(rawMd) {
    document.getElementById('content').innerHTML = convert(rawMd);
  });
});

对应DOM结构仅保留<div id="content"></div>即可，无需额外中间容器。

如果一定要沿用load方法的写法，可以把innerText替换为textContent，textContent不受元素可见性影响，会完整保留原始文本的所有格式：

$(document).ready(function() {
  const content = document.getElementById('content');
  $("#content").load("convertme.md", function() {
    content.innerHTML = convert(content.textContent);
  });
});

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