HTML 要素へのコンテンツの追加と要素の追加

jQuery を利用すると、HTML タグ全体に対してコンテンツを追加するのは簡単です。

またコンテンツだけではなく、その前後にDOM 要素を挿入するなどの操作も簡単に行えます。

いろいろな方法が考えられるのですが、ここではズバリこの目的のためのメソッドである append, prepend, after, before を利用する方法を紹介します。

要素内にコンテンツを追加する

はじめに具体例をみてください。

ここでは [] に囲まれて、「これは h3 要素」「これも h3 要素」という文字が表示されていると思います。

実はここでは HTML には角括弧 [] は書いていません。HTML では次のように書いてあります。

<h3>これはh3要素</h3>
<h3>これもh3要素</h3>

これに対し、jQuery で [] を追加しています。

具体的には append, prepend を用いて次のコードのようにしています。

$('section h3').prepend('[');
$('section h3').append(']');

ちなみに、このウェブサイトでは本文記事の部分だけを section タグで囲んでいるので、 セレクターを section h3 としています。

これで記事内の全ての h3 要素のコンテンツとして、[] が追加されます。

要素を追加する

さて、次の例では今度はコンテンツではなく、HTML 要素を追加します。

こちらも具体例からみてください。

「これはh4要素」と書いている前後に hr で線が引かれていると思います。

実はこの hr は直接 HTML には記述しているのではありません。次のコードのように before、after メソッドを利用して、 hr を挿入しているのです。

$('h4').before('<hr/>');
$('h4').after('<hr/>');