楽天ウェブサービス 組み立てたHTMLタグを表示する方法について。

【講座名】
楽天ウェブサービス初心者入門講座 に関する質問

【質問】
楽天ウェブサービスから 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";

スポンサードリンク


スポンサードリンク






プログラミング入門 Q&A TOPへ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。