Question

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

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

以下是一些示例代码here，它说明了问题所在。在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解析器，它会忽略多余的空白，包括硬回车。如果您更改方法以包含＆lt; pre＆gt;在字符串中标记，它工作正常，因为HTML解析器保留了硬回车。

运行示例页后，您可以通过执行View Generated Source来查看此操作：

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

您可以在此处看到，硬回车不再是＆lt; pre＆gt;内容的一部分。标签

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

不知道之前是否有过这样的建议，但是我在内部HTML转换为'pre'标签时找到的用于保留空格，换行符等的解决方案是在文本中插入另一个“pre”标记： / p>

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

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

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

似乎是I.E.在执行innerHTML之前解析文本。上面的原因导致解析器将文本留在未解析的附加“pre”标记内。这是有道理的，因为这就是解析器应该做的事情。也适用于FF。

Answer 5

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

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

<pre> tag loses line breaks when setting innerHTML in IE</pre>

5 个答案: