& lt; pré & gt; tag perd les sauts de ligne lors de la définition de innerHTML dans IE

Je suis en utilisant le Prototype du PeriodicalUpdater pour mettre à jour un div avec les résultats de l'appel ajax. Si je comprends bien, la div est mise à jour par l'établissement de ses innerHTML.

La div est enveloppé dans un <pre> tag. Dans Firefox, la <pre> formatage fonctionne comme prévu, mais sous IE, le texte se termine sur une seule ligne.

Voici un exemple de code trouvé ici qui illustre bien le problème. Dans Firefox, abc se trouve sur une autre ligne que def; dans IE c'est sur la même ligne.

    <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>

Quelqu'un connais un moyen de contourner ce problème?

source d'informationauteur MCS

  1. 17

    Réglage innerHTML les feux d'un analyseur HTML, qui ignore les espaces en trop, y compris des retours. Si vous changez votre méthode pour inclure le <pre> tag dans la chaîne, il fonctionne bien parce que l'analyseur HTML conserve les retours dur.

    Vous pouvez le voir en action en faisant une Vue Source Généré après l'exécution de votre page d'exemple:

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

    Vous pouvez voir ici que le retour n'est plus une partie du contenu de la <pre> tag.

  2. 6

    ou vous pourriez 

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

    En général, vous obtiendrez des résultats plus cohérents en utilisant les méthodes du DOM pour construire un contenu dynamique, surtout quand vous vous souciez de choses subtiles, comme la normalisation de l'espace. Toutefois, si vous êtes fixés sur l'utilisation de innerHTML pour cela, il y a un IE solution, qui consiste à utiliser le outerHTML attribut, et inclure le bloc à l'intérieur des balises.

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

    Cette solution de contournement et plus de discussion peuvent être trouvés ici: L'insertion d'un saut de ligne dans un pré tag (IE, Javascript)

  4. 1

    Ne sais pas si cela a été suggéré précédemment, mais la solution que j'ai trouvé pour la conservation des espaces, retours à la ligne, etc lorsque vous faites un innerHTML dans un " pré "tag consiste à insérer un autre" pré " de la balise dans le texte:

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

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

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

    Semble I. E. n'a analyser le texte avant de faire le innerHTML. Ci-dessus les causes de l'analyseur de laisser le texte à l'intérieur de la plus " pré " tag unparsed. De sens puisque c'est ce que l'analyseur est censé faire. fonctionne également avec les FF.

  5. 0

    Il pourrait également être réécrit "le Python chemin", c'est à dire:

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