英辞郎 on the WebをGoogleツールバー for Firefoxから使う

記事内容を削除しました – 2007年11月10日(土)

表題の内容は英辞郎 on the Webの利用規約に違反するものであったため、削除させていただきました。

下記のコードだけ、残しておくことにします。自己責任でご利用ください。

<search charset="UTF-8">http://eow.alc.co.jp/{query}/UTF-8/?q={query}</search>

appendChildに失敗する原因

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

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

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

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