jQueryで要素を追加する色々な方法を見ていきます。
使い方サンプル一覧
別ページで動作サンプル付けてます。ディベロッパーツールなど使いながら確認してみてください。
appendとは?
$('ul').append('<li>内容</li>');<ul>の中の一番最後に<li>内容</li>を追加します。
prependとは?
$('ul').prepend('<li>内容</li>');<ul>の中の一番最初に<li>内容</li>を追加します。
appendToとは?
$('<li>追加するリスト</li>').appendTo('ul');appendとやっている事は同じですが、
- append:<ul>の中の一番最後に<li>内容</li>を追加
- appendTo:<li>内容</li>を<ul>の中の一番最後に追加
というように指定の順番が異なります。
prependToとは?
$('<li>追加するリスト</li>').prependTo('ul');prependとやっている事は同じですが、
- prepend:<ul>の中の一番最初に<li>内容</li>を追加
- prependTo:<li>内容</li>を<ul>の中の一番最初に追加
というように指定の順番が異なります。
beforeとは?
$('ul').before('<p>追加するもの</p>');<ul>の直前に<p>タグを追加します。prependはulの中でしたが、beforeはセレクタで指定した要素の外側です。
afterとは?
$('ul').after('<p>追加するもの</p>');<ul>の直後に<p>タグを追加します。appendはulの中でしたが、afterはセレクタで指定した要素の外側です。
insertBeforeとは?
$('<p>追加するもの</p>').insertBefore('ul');insertBeforeはbeforeとやっている事は同じですが、
- before:<ul>の直前に<p>タグを追加
- insertBefore:<p>タグを<ul>の直前に追加
というように指定の順番が異なります。
insertAfterとは?
$('<p>追加するもの</p>').insertAfter('ul');insertAfterはafterとやっている事は同じですが、
- after:<ul>の直後に<p>タグを追加
- insertAfter:<p>タグを<ul>の直後に追加
というように指定の順番が異なります。
wrapとは?
$('p').wrap('<div>');<p>を<div>で囲います。
wrapInnerとは?
$('li').wrapInner('<span>');<li>の中を<span>で囲います。
wrapAllとは?
$('p').wrapAll('<div>');すべての<p>を<div>で囲います。サンプルではあえて<p>と<p>の間に<ul>がありますが、<ul>は含まれずに<p>だけ纏められて囲われるようになります。
まとめ
DOM操作で今回は主に追加するものをまとめました。思い通りに動かすのは慣れないうちは大変なのでカンペがわりにしてみてください。
