「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。

「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。

他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。

class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下記のような感じです。

<script>
$(function(){
	var now = new Date(); //現在の日時を取得
	var h1Class = $("h1").attr("class"); //h1のclassを取得
	var aDate = h1Class.replace("new","").split("-"); //取得したclassを整形
	var add_date = new Date(aDate[0], aDate[1], aDate[2]); //Dateオブジェクトに変換
	//もし現在が日時がclassで指定した日時より前なら画像を表示
	if(now < add_date) $("h1.new2011-12-21").append('<img src="new.gif">');
});
</script>
<!-- class名に画像の表示年月日を付ける -->
<h1 class="new2011-12-21">新色 ふかふか手編みマフラー</h1>

このように新しく要素を追加する方法を知っておくと、ちょっとしたスクリプトで手間を省く事ができます。

新しい要素を追加するといっても、対象の要素の前に追加、中に追加、包み込む、等いろいろなものが用意されています。ではではセレクタのとき同様、動作サンプル&簡易説明書きをチェックしてみてください。

jQuery DOM操作（Manipulation）系メソッド動作サンプル

[ DOM操作（Manipulation) ]

$(“div.box”).after(“<div>…</div>”)
CLASS名 box が指定されたdivタグの後に<div>…</div>を追加

$(“<div>…</div>”).insertAfter(“div.box”)
<div>…</div>をCLASS名 box が指定されたdivタグの後に追加

$(“div.box”).before(“<div>…</div>”)
CLASS名 box が指定されたdivタグの前に追加

$(“<div>…</div>”).insertBefore(“div.box”)
<div>…</div>をCLASS名 box が指定されたdivタグの前に追加

$(“div.box”).append(“<div>…</div>”)
CLASS名 box が指定されたdivタグの子要素の最後に<div>…</div>を追加

$(“<div>…</div>”).appendTo(“div.box”)
<div>…</div>をCLASS名 box が指定されたdivタグの子要素の最後に追加

$(“div.box”).prepend(“<div>…</div>”)
CLASS名 box が指定されたdivタグの子要素の最初に<div>…</div>を追加

$(“<div>…</div>”).prependTo(“div.box”)
<div>…</div>をCLASS名 box が指定されたdivタグの子要素の最初に追加

$(“div.box”).wrap(“<div>…</div>”)
CLASS名 box が指定されたdivタグを<div>…</div>をで包み込む
(複数ある場合は各それぞれを包み込む)

$(“div.box”).wrapAll(“<div>…</div>”)
CLASS名 box が指定されたdivタグすべてを<div>…</div>をで包み込む
(複数ある場合はすべてを一つに包み込む)

$(“div.box”).wrapInner(“<div>…</div>”)
CLASS名 box が指定されたdivタグの子要素を<div>…</div>をで包み込む

$(“div.box”).clone().appendTo(“div.boxA”)
「$(“div.box”).clone()」でCLASS名 box が指定されたdivタグを複製
「appendTo(“div.boxA”)」で複製したものを、CLASS名 boxA が指定されたdivタグの子要素の最後に追加

$(“div.box”).replaceWith(“<div>…</div>”)
CLASS名 box が指定されたdivタグを<div>…</div>に入れ替える

$(“div.box”).remove()
CLASS名 box が指定されたdivタグを削除（中身もすべて）

今回はManipulation系の中でも新しく要素を追加するものを抜粋して紹介しています。本家ドキュメントではカテゴリが細かく分けられていますが、新しく要素を追加するものはほぼ紹介できていると思います。その他のManipulation系メソッドも知りたい方は、ぜひ本家ドキュメントをのぞいて見て下さい。

Manipulation – jQuery API