最近はJavaScriptをいじってるのが楽しくなってきたのでそんなネタでも。

ノードをDOMツリーに追加するappendChildメソッド。当然ですが、ノード以外のものを追加しようとするとエラーになってしまいます。

例えば文字列を追加しようとした場合、Firebugのコンソールではuncaught exception:…とかいうエラーが出ます。数行に渡って激しく怒られるため、最初は一体何事かと思いました。

例えば<p id="result">appendChild</p>というp要素があってそこにappendChildしたいとすると…

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
result.appendChild(string); // ←stringは文字列なのでエラー
}

文字列を追加したい場合はcreateTextNodeメソッドを使って文字列をテキストノードに変換する、もしくは最初からcreateTextNodeを使って文字列ではなくテキストノードを作ってappendChildしなければなりません。これで1時間は悩みました・・・orz

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
var textNode = document.createTextNode(string);// テキストノードに変換
result.appendChild(textNode); // ←textNodeはテキストノードなので成功
}

innerHTMLを使えば文字列のまま扱えますが、追加される対象親ノードの中身が全部書き換えられてしまう点に注意。innerHTMLだと"追加"というより"書き換え"っていう感じですね。

window.onload = function() {
var result = document.getElementById('result');
var string = '成功!!';
result.innerHTML = string;
}

Continue reading →