求助：如何在div中正确显示格式化的原始XML代码？

我懂你的困扰——直接把XML代码放到页面里，浏览器会把那些标签当成HTML来解析，自然看不到原始的XML内容了。下面给你几个靠谱的解决办法：

方法1：手动转义XML特殊字符 #

把XML里的<替换成<，>替换成>，这样浏览器就不会把它们当成HTML标签处理了。配合prettify的话，代码结构大概是这样：

<div>
  <pre class="prettyprint lang-xml">
    &lt;note&gt; 
      &lt;to&gt;Tove&lt;/to&gt; 
      &lt;from&gt;Jani&lt;/from&gt; 
      &lt;heading&gt;Reminder&lt;/heading&gt; 
      &lt;body&gt;Don't forget me this weekend!&lt;/body&gt; 
    &lt;/note&gt;
  </pre>
</div>
<script src="run_prettify.js"></script>

这里lang-xml是告诉prettify这是XML代码，会帮你做语法高亮，pre标签则会保留代码的换行和缩进格式。

方法2：动态插入时使用textContent（推荐） #

如果你的XML是通过JavaScript动态添加到页面的，别用innerHTML，改用textContent（或者innerText，不过textContent更标准），它会把内容当成纯文本插入，不会解析标签：

const xmlStr = `<note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>`;
const preElement = document.createElement('pre');
preElement.className = 'prettyprint lang-xml';
preElement.textContent = xmlStr;
document.querySelector('div').appendChild(preElement);

// 然后调用prettify初始化
PR.prettyPrint();

这样不管XML里有多少特殊标签，都会原封不动显示出来，prettify也能正常识别并高亮。

为什么之前的方法失效？ #

当你直接把XML代码写在pre标签里时，浏览器会先解析整个HTML文档，把<note>、<to>这些标签当成HTML元素处理，而不是当成文本内容——所以你看不到原始的XML代码，反而这些标签会被解析成DOM节点，自然就“消失”在页面里了。

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