JavaScriptで要素内にマークアップを追加する方法【innerHTML活用術】

この記事では、JavaScriptを使って既存の要素の中に別の要素（マークアップ）を追加する方法を解説します。

JavaScriptには innerHTML という便利なプロパティがあり、これを使えば既存の要素内にHTMLマークアップを簡単に追加できます。

例として、見出し（h1）を持つ記事のヘッダーがあり、その直下にサブタイトルやキャッチコピーといった重要なメッセージを追加したいケースを考えてみましょう。

HTMLの準備

まずはベースとなるHTMLです。article要素の中にheader要素とh1見出しが配置されています。

<article>
  <header>
    <h1>Headline for your article</h1>
  </header>
</article>

JavaScriptでコンテンツを追加する

次に、h1見出しの直後にタグライン用のHTMLマークアップを追加してみます。

// article要素内のheader要素を選択
const articleHeadline = document.querySelector('article header')

// h1要素の直後にコンテンツを追加
articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

シンプルで使いやすいですね。既存の内容を保持したまま、後ろに新しい要素を連結できるのがポイントです。

見出しの「前」にコンテンツを追加するには？

では逆に、h1見出しの下ではなく上にコンテンツを追加したい場合はどうすればよいのでしょうか。

これも簡単です。まず新しいコンテンツを変数に代入し、その後に元の見出しの内容を連結します。順序を入れ替えるだけで、追加位置を制御できます。

articleHeadline.innerHTML = '<p>Extra content right before the headline.</p>' + articleHeadline.innerHTML

まとめ

innerHTML を使えば、文字列の連結順序を変えるだけで、要素内の任意の位置にマークアップを柔軟に追加できます。ただし、innerHTML は既存の子要素をすべて再構築するため、イベントリスナーが失われる点には注意が必要です。動的なDOM操作を行う場合は、状況に応じて insertAdjacentHTML() や appendChild() などのAPIも検討するとよいでしょう。