5月更新・前月(4月)の人気記事トップ10 05/02/2023
- ( 02 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 07 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【2022年7月】Mac画面解像度まとめ
- (圏外↑) 【GIMP】線を真っ直ぐ引く方法
- ( 08 ↓) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【JavaScript】入門14. JavaScriptで文字や画像を表示する
こんにちは(・∀・)
今日はJavaScriptでHTMLの要素に文字や画像を表示する方法をご紹介します。
JavaScriptでWebページに文字や画像を表示する
HTMLの要素に文字や画像を表示させる方法です。
サンプル
今までは良くdocument.writeが使われてきました。
JavaScript
<script>
document.write('<p id="demo1">hoge1</p>');
</script>
Result
しかしHTML5ではdocument.writeは非推奨のようです。なのでここではinnerHTML使用します。
HTML
<p id="demo2">demo2</p>
JavaScript
<script>
var demo2 = document.getElementById('demo2');
demo2.innerHTML = 'hoge2';
</script>
Result
demo2
demo2がhoge2に書き換えられました。次のように書いても同じ結果が返ります。
HTML
<p id="demo3">demo3</p>
JavaScript
<script>
document.getElementById('demo3').innerHTML = 'hoge3';
</script>
Result
demo3
demo3がhoge3に書き換えられました。
画像を表示させる場合は...
HTML
<p id="demo4">demo4</p>
JavaScript
<script>
document.getElementById('demo4').innerHTML = '<img src="img.png" alt="サンプル画像">';
</script>
Result
demo4
demo4が画像に置き換えられました。
innerHTMLよりも高速なinsertAdjacentHTMLを使う方法もあります。ただしこちらはinnerHTMLのような書き換えではなく挿入になります。
HTML
<p 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で文字や画像を表示させる方法をご紹介しました。