Comportement étrange - jQuery .html() entraîne la perte des sauts de ligne dans les éléments <pre> dans IE8

Question

J'ai quelques pre des éléments formatés avec des sauts de ligne comme ceci :

<pre id="code1">Some
formatted
code</pre>

<pre id="code2">Some more
formatted
code</pre>

Si j'applique ce qui suit au premier pre élément :

$('#code1').html($('#code1').html());

Dans IE8, cela entraîne la perte des sauts de ligne et le résultat est le suivant :

Some formatted code

Some more
formatted
code

Dans Chrome, le jQuery ci-dessus n'a aucun effet, comme on pouvait s'y attendre.

Exemple : http://jsfiddle.net/6mkAa/

Quelqu'un sait-il ce qui cause ce comportement bizarre dans IE ? Je voudrais modifier le contenu de mon pre sans que le formatage soit perdu dans le processus.

Answer 1

Vous pouvez essayer .text() :

http://jsfiddle.net/6mkAa/6/

$('#code1').text($('#code1').text());

Answer 2

Ce problème avec IE8 parce que,
La méthode Jquery html() utilise la propriété innerHTML du navigateur. Il se peut que certains navigateurs ne renvoient pas un HTML qui reproduit exactement la source HTML du document d'origine. Par exemple, Internet Explorer omet parfois les guillemets autour des valeurs d'attribut si celles-ci ne contiennent que des caractères alphanumériques.

que vous pouvez utiliser comme ceci

$("#code1").innerHTML($("#code1").html())