<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