menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 3 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 9 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 7 ↑) 【PHP】PHPでシンプルなメールフォーム
  6. ( 5 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  7. ( 4 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  8. (10 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  9. ( 9 - ) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
このエントリーをはてなブックマークに追加

【JavaScript】入門14. JavaScriptで文字や画像を表示する

【JavaScript】入門14. JavaScriptで文字や画像を表示する

こんにちは(・∀・)

今日はJavaScriptでHTMLの要素に文字や画像を表示する方法をご紹介します。

JavaScriptでWebページに文字や画像を表示する

HTMLの要素に文字や画像を表示させる方法です。

サンプル

今までは良くdocument.writeが使われてきました。

JavaScript

<script>
document.write('<span id="demo1">hoge1</p>');
</script>
Result

 

しかしHTML5ではdocument.writeは非推奨のようです。

 

なのでここではinnerHTML使用します。

HTML

<span id="demo2">demo2</p>
JavaScript

<script>
var demo2 = document.getElementById('demo2');
demo2.innerHTML = 'hoge2';
</script>
Result
demo2

 

demo2がhoge2に書き換えられました。

 

次のように書いても同じ結果が返ります。

HTML

<span id="demo3">demo3</p>
JavaScript

<script>
document.getElementById('demo3').innerHTML = 'hoge3';
</script>
Result
demo3

 

demo3がhoge3に書き換えられました。

 

画像を表示させる場合は...

HTML

<span id="demo4">demo4</p>
JavaScript

<script>
document.getElementById('demo4').innerHTML = '<img src="img.png" alt="サンプル画像">';
</script>
Result
demo4

 

demo4が画像に置き換えられました。

 

innerHTMLよりも高速なinsertAdjacentHTMLを使う方法もあります。

ただしこちらはinnerHTMLのような書き換えではなく挿入になります。

HTML

<span id="demo5">demo5</p>
JavaScript

<script>
document.getElementById('demo5').insertAdjacentHTML('afterbegin','hoge5');
</script>
Result
demo5

 

demo5の前にhoge5が挿入されました。

 

ここで簡単にinsertAdjacentHTMLの構文をご紹介します。


element.insertAdjacentHTML('position','text');

positionはelement(要素)に対しての相対位置を次の文字列の中から選択して指定します。

beforebegin
要素の直前に挿入
afterbegin
要素内の先頭に挿入
beforeend
要素内の最後に挿入
afterend
要素の直後に挿入

 


beforebegin
<p>
afterbegin
hogehoge
beforeend
</p>
afterend

 

その他innerTextを使う方法もありますが個人的にはあまり使うことはないですね。

以上JavaScriptで文字や画像を表示させる方法をご紹介しました。

 

にほんブログ村 IT技術ブログ JavaScriptへ

関連リンク

JavaScript入門
jQuery入門

参考サイト

element.insertAdjacentHTML

  • JavaScript
このエントリーをはてなブックマークに追加