IEの .innerHTML で複数のスペースを入れる方法

JavaScript

IEでは <pre>.innerHTML に連続したスペースや改行を入れると、単一のスペースに置き換わってしまいます。
例えば次のようなJavaScriptをIEとFirefoxで実行してみると:

var s = "0123456789ABCDEF\n a  b   c    d";
var pre = document.createElement( "pre" );
pre.innerHTML = s;
document.body.appendChild( pre );


IEの表示:


Firefoxの表示:

IEでは、複数の連続したスペースや改行文字が全て単一のスペースになってしまっています。改行文字を "<br>"に置き換えて、createTextNode() すれば解決しそうな気もしますが、

var s = "<span style=\"color:red\">0123456789ABCDEF</span>\n a  b   c    d";

みたいなのだと、createTextNode が使えないのでしんどいです。さすがに自力でパースとかしたくないので、いろいろ試した結果、以下のような感じでうまくいきました。

var s = "<span style=\"color:red\">0123456789ABCDEF</span>\n a  b   c    d";
var pre = document.createElement( "pre" );
pre.innerHTML = "<pre>" + s + "</pre>";
document.body.appendChild( pre.childNodes.item( 0 ).cloneNode( true ) );

pre を二重に作っておいて、外側の pre からみた子ノードを body に appendChild、という感じです。
実行結果はこんな感じです。


IEの表示:


Firefoxの表示:

なんか涙でそうによくわかんない回避方法ですが、とりあえず動けばおｋということで…。