最近は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;
}
一応サンプルを用意しました。Firebugのコンソールを用意した上でお楽しみ（？）ください。