<pre>在 IE 中设置 innerHTML 时标记丢失换行符

Question

我正在使用 Prototype 的 PeriodicalUpdater 用 ajax 调用的结果更新 div。 据我了解，div 是通过设置其innerHTML 来更新的。

div 被包裹在一个<pre>标签中。 在 Firefox 中， <pre>格式按预期工作，但在 IE 中，文本都以一行结束。

这是此处找到的一些示例代码，用于说明问题。 在 Firefox 中， abc与def位于不同的行； 在 IE 中它在同一行上。

    <html>
    <head>
      <title>IE preformatted text sucks</title>
    </head>
    <body>
      <pre id="test">
        a b c
        d e f
      </pre>
      <script type="text/javascript"><!--
      var textContent = document.getElementById("test").innerText;
      textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
      document.getElementById("test").style.whiteSpace = "pre";
      document.getElementById("test").innerHTML = textContent;
      --></script>
    </body>
    </html>

有人知道解决这个问题的方法吗？

Answer 1

设置innerHTML 会启动一个HTML 解析器，它会忽略包括硬返回在内的多余空格。 如果您将方法更改为在字符串中包含 <pre> 标记，则效果很好，因为 HTML 解析器保留了硬返回。

在运行示例页面后，您可以通过查看生成的源代码来查看此操作：

<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>

你可以在这里看到硬回车不再是 <pre> 标签内容的一部分。

Answer 2

或者你可以

if (el.innerText) {
    el.innerText = val;
} else {
    el.innerHTML = val;
}

Answer 3

通常，通过使用 DOM 方法构建动态内容，您将获得更一致的结果，尤其是当您关心诸如空白规范化之类的微妙事情时。 但是，如果您为此使用innerHTML，则有一种IE 解决方法，即使用outerHTML属性并包含封闭标签。

if(test.outerHTML)
    test.outerHTML = '<pre id="test">'+textContent+'</pre>';
else
    test.innerHTML = textContent;

可以在此处找到此解决方法和更多讨论： Inserting a newline into a pre tag (IE, Javascript)

Answer 4

不知道这之前是否有人建议过，但是我发现在将 innerHTML 插入“pre”标签时保留空格、换行符等的解决方案是在文本中插入另一个“pre”标签：

<pre id="pretag"></pre>

TextToInsert = "lots of text with spaces and newlines";

document.getElementById("pretag").innerHTML = "<pre>" + TextToInsert + "</pre>";

似乎 IE 在执行 innerHTML 之前确实解析了文本。 以上导致解析器将附加“pre”标签内的文本保留为未解析。 这是有道理的，因为这是解析器应该做的。 也适用于 FF。

Answer 5

它也可以重写为“Python 方式”，即：

el.innerText && el.innerText = val || el.innerHTML = val;

<pre>在 IE 中设置 innerHTML 时标记丢失换行符

问题描述

5 个解决方案

解决方案1
18 已采纳 2009-01-16 19:01:32

解决方案2
5 2009-12-15 17:37:32

解决方案3
5 2009-01-16 19:10:56

解决方案4
1 2012-05-09 05:37:34

解决方案5
0 2010-03-12 12:10:40

<pre>在 IE 中设置 innerHTML 时标记丢失换行符

问题描述

5 个解决方案

解决方案1 18 已采纳 2009-01-16 19:01:32

解决方案2 5 2009-12-15 17:37:32

解决方案3 5 2009-01-16 19:10:56

解决方案4 1 2012-05-09 05:37:34

解决方案5 0 2010-03-12 12:10:40

解决方案1
18 已采纳 2009-01-16 19:01:32

解决方案2
5 2009-12-15 17:37:32

解决方案3
5 2009-01-16 19:10:56

解决方案4
1 2012-05-09 05:37:34

解决方案5
0 2010-03-12 12:10:40