Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2018/04/13こんにちは(・∀・)今日はJavaScriptでHTMLの要素に文字や画像を表示する方法をご紹介します。JavaScriptでWebページに文字や画像を表示するHTMLの要素に文字や画像を表示させる方法です。サンプル今までは良くdocument.writeが使われてきました。id="demo1">hoge1</p>');</script>ResultしかしHTML5ではdocument.writeは非推奨のようです。ここではinnerHTML使用します。'hoge2';</script>Resultdemo2demo2がhoge2に書き換えられました。次のように書いても同じ結果が返ります。'hoge3';</script>Resultdemo3demo3がhoge3に書き換えられました。alt="サンプル画像">';</script>Resultdemo4demo4が画像に置き換えられました。innerHTMLよりも高速なinsertAdjacentHTMLを使う方法もあります。こちらはinnerHTMLのような書き換えではなく挿入になります。id="demo5">demo5</p>JavaScript<script>document.getElementById('demo5').insertAdjacentHTML('afterbegin','hoge5');</script>Resultdemo5demo5の前にhoge5が挿入されました。ここで簡単にinsertAdjacentHTMLの構文をご紹介します。element.insertAdjacentHTML('position','text');positionはelement(要素)に対しての相対位置を次の文字列の中から選択して指定します。beforebegin要素の直前に挿入afterbegin要素内の先頭に挿入beforeend要素内の最後に挿入afterend要素の直後に挿入beforebegin<p>afterbeginhogehogebeforeend</p>afterendその他innerTextを使う方法もありますが個人的にはあまり使うことはないですね。以上JavaScriptで文字や画像を表示させる方法をご紹介しました。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。