jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > HTML 要素へのコンテンツの追加と要素の追加

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

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

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

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

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

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

これはh3要素

これもh3要素

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

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

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

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

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

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

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

要素を追加する

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

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

これはh4要素

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

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

$('h4').before('<hr/>');
$('h4').after('<hr/>');
ホーム > jQuery の基礎 > HTML 要素へのコンテンツの追加と要素の追加
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門