jqueryで要素を追加する

jQueryを使ったDocuments操作で、Documents要素をゴニョゴニョするときがある。
その備忘録
今回は要素の追加

DOM(Document Object Model)を操作することで、いろいろな形で追加できますが
注意点としては、処理が重くなりがちなので、複数の要素の追加は一度で行うなど
各メソッドの実行は最小限の「回数」になるように設計しましょう。

DOM追加のメソッドには
append()
prepend()
befor()
after()
がありますが、順番に見ていきましょう。

1)append()
指定した要素の最終部分に追加します。

<div id=”oya”>
oya
</div>

とすると
で oya 要素の最後に kodomo が追加される
<div id=”oya”>
oya
kodomo
</div>

#oya を body にしてみると

</body> の前に”kodomo”が追加される

p タグを指定すると

Document内のすべての<p></p>に”kodomo” が追加される

2)prepend()
append()の逆で指定した要素の先頭に挿入する

<div id=”oya”>
oya
</div>

とすると

<div id=”oya”>
kodomo
oya
</div>
となる

3)before()
指定した要素の「前」に入れる

<div id=”oya”>
oya
</div>

とすると

kodomo
<div id=”oya”>
oya
</div>

となる。

4)after()
指定した要素の「後」に入れる

<div id=”oya”>
oya
</div>

とすると

<div id=”oya”>
oya
</div>
kodomo

となります

以上を整理すると、
指定要素の末尾に追加する —-> append()
指定要素の先頭に挿入する —-> prepend()
指定要素の前に挿入する —-> befor()
指定要素の後ろに挿入する —-> after()
となります。