楽天ウェブサービス初心者入門講座 に関する質問
【質問】
楽天ウェブサービスから XML で商品データを取得して、値を取り出し、HTMLを組み立てるところまでは理解できました。
そこで質問なのですが、組み立てたHTMLタグを、Webブラウザの画面に表示し、確認するには、どうしたらいいですか？
【回答】
HTMLタグをWebブラウザにそのまま表示するには、工夫が必要です。
HTMLタグはブラウザが解釈して表示してしまうので、 < > & などの特殊文字をエスケープする必要があるからです。つまりHTMLタグを無効にすることで、画面に表示できます。
prototype.js を利用しているので、その機能を使ってみましょう。
prototype.js は String クラスが拡張されているので、メソッドを利用することで、簡単にエスケープすることができます。
組み立てたHTMLタグは変数 tmpHtml に入っているので、
result.innerHTML = tmpHtml;
の部分を、
result.innerHTML = tmpHtml.escapeHTML();
に変更するだけで、エスケープした結果を表示できます。
＊escapeHTML() は prototype.js の機能です。
エスケープしない場合は、テキストエリアにならそのままで出力できます。
またはアラートでもそのまま表示可能です。
alert(tmpHtml);
アラートで表示するのが一番手軽ですが、HTMLが長くなると見難いです。
【ワンポイント】
HTMLタグを表示する場合は、HTMLを組み立てるプログラム部分で、改行(\n)やタブ(\t)を入れると、出力した時に見やすくなります。
例
tmpHtml += "<p>\n";
tmpHtml += "<p>\t";
