JavaScriptで画像をページ上に表示するには、画像の表示をHTMLに任せることによって実現することができます。
やり方としては、JavaScriptでページにimgタグを挿入することで実現します。
ページにタグを挿入するにはdocument.write関数を用いて行います。
document.write
document.write関数はの使い方は以下です。
|
1 |
document.write('タグなどの文字列'); |
下の例ではbodyタグ内部にscriptタグを埋め込みそこでdocument.writeを使用する例です。
|
1 2 3 4 5 6 7 |
// html内でのやり取り <body> ここから下に画像表示<br> <script> document.write('<img src="http://uxmilk.jp/wp-content/themes/uxmilk/images/milkman_logo.png" alt="UX MILK">') </script> </body> |
このコードを実行すると以下のように表示されます。
今回はbodyタグの中にscriptタグを直接埋め込んでいますが、実際のユースケースとしてはdocument.writeでタグを埋め込む関数を事前に定義しておき、何かボタンをクリックしたら画像が書き込まれる等の使い方をすると良いと思います。
今回はdocument.writeを画像を表示するために使いましたが、そもそもdocument.write関数はタグを埋め込むのに役に立つ関数です。
ですので、もしある条件に合致したらこのHTMLを表示する等の画面の出しわけに応用することができます。
今回の画像の例を応用して、動的なコンテンツを表示するページを作成することも可能となります。
