如何通过JS的createElement创建pre标签在HTML中显示 文本

问题原因 #

你代码里字符串末尾的是回车控制字符（CR，对应ASCII码13，转义符为\r），浏览器默认会忽略这类不可见控制字符——哪怕放在<pre>标签中，单独的\r也不会被渲染为可见内容（通常只有\r\n或\n会被解析为换行效果）。

可行解决方案 #

方案1：将控制字符转义为可显示的HTML实体 #

把\r替换成对应的HTML实体
，或者直接转义为字符串形式\r，让浏览器能渲染出该字符的标识：

<html>
<body>

<p>Click the button to create a PRE element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("pre");
  var originalStr = "Hello World\r";
  // 替换CR为HTML实体，会显示为不可见但占位置的回车标记
  var displayStr = originalStr.replace(/\r/g, "&#13;");
  // 若想直接显示"\r"文本，可改用下面这行
  // var displayStr = originalStr.replace(/\r/g, "\\r");
  var t = document.createTextNode(displayStr);
  x.appendChild(t);
  document.body.appendChild(x);
}
</script>

</body>
</html>

方案2：用可视化符号替代控制字符 #

使用Unicode的回车可视化符号␍（对应转义符\u240D）替换原有的\r，直接展示代表回车的可见符号：

<html>
<body>

<p>Click the button to create a PRE element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("pre");
  // 用可视化符号替代原CR控制字符
  var t = document.createTextNode("Hello World\u240D");
  x.appendChild(t);
  document.body.appendChild(x);
}
</script>

</body>
</html>

补充说明 #

• 若仅需实现换行效果，直接使用\n即可；但如果要显示回车字符本身，必须通过转义或替换为可视化形式实现。
• 单独的\r在现代浏览器中不会产生可见渲染，这是浏览器对控制字符的默认处理规则。

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