createTextNodeで半角スペースを入れたい…

twitterでid:teramakoさんと@ssmylhさんに教えていただいたので覚書。

2012/2/18 0:45
ブコメで突っ込まれまくっているので全体的に修正。

ヤリたいこと

createTextNodeで半角スペース(nbsp)半角スペースを生成して、span要素に挿入したい。

2012/2/18 0:52 修正
混同して書いていましたが、nbspではなく半角スペースです。nbspと半角スペースは別物です。

NBSPと通常のスペースの違いは、NBSPを含む文字列が行末に来て、かつ長すぎて行に収まらない場合、文字列全体（NBSPでつながっている文字列も含めて）が次の行へ移動することにある。これは通常の文字列の折り返しと類似している。たとえば、文字列“ambidextrously”は決して分割されることはなく、“am bi dextrous ly”（すなわち“am bi dextrous ly”）も同様である。
ノーブレークスペース - wikipedia

var elm = document.createElement("span");
var txt = document.createTextNode(" "); //半角スペースをいれたい
elm.appendChild(txt);
document.body.appendChild(elm); //空のspanが虚しく挿入されるだけ…

2012/2/18 1:08 修正
chromiumでのみ確認していましたが、Firefox9.01で確認で確認したところ普通に半角スペースが入っていました。
IE（7/8/9）でも同様に半角スペースが入っていました。
chromium/chromeだけが半角スペースを取り除くようです…

var elm = document.createElement("span");
var txt = document.createTextNode("$nbsp;"); //これならどうだ!?
elm.appendChild(txt);
document.body.appendChild(elm); //そのまま「 」がという文字列が挿入されるだけ…

createTextNodeが勝手にエスケープしてるっぽい？

文字参照はどうやらcreateTextNodeがエスケープしているみたい。
文字参照が使えないならどうすればいいのか。そういうときはjavascriptのエスケープシーケンスを使えばいい。

2012/2/18 1:10 修正
エスケープでもなんでもなく、普通に文字列をつっこんでいるだけです。id:monjudohさんのおっしゃる通りです…

これで解決

var elm = document.createElement("span");
var txt = document.createTextNode("\u00a0");
elm.appendChild(txt);
document.body.appendChild(elm); //うまくnbspが入った！

2012/2/18 1:12 追記
\u00a0はnbspですが、半角スペースは半角スペース\u0020です。半角スペースを入れたいのが本記事の目的なので、\u0020が適切です。

<とか&もこれで乗り切れそう。

2012/2/18 1:14 追記
あやふやなまま記事書くのは最悪ですね…