JavaScriptを使用して要素内にマークアップを追加する方法

JavaScriptを使用して別の要素内に要素を追加する方法を学びます。

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

見出し付きの記事ヘッダーがあり、そのすぐ下に字幕やタグラインなどの重要なメッセージを追加する必要があるとします。

HTML

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

JavaScript

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

// Select h1 element inside the article element
const articleHeadline = document.querySelector('article header')

// Add content right after the h1 element
articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

かなりかっこいいですね

h1の見出しの下ではなく、すぐ上にコンテンツを追加する必要がある場合はどうなりますか？

問題ありません。最初に新しいコンテンツをarticleHeadlineに割り当てます。 変数を入力し、後で見出しのコンテンツを追加します：

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