こんにちは！
unitopi新米ライターの、ケインでございます。
このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript（jQuery）における「親要素・子要素の取得・追加（削除）」について、今回は「要素の追加と削除」のお話をさせていただきます！
ちなみに今回は、説明の仕方がこれまでの２回と異なるアプローチになっているので、その点ご承知おきください！（※なぜなら紹介する量が多そうだからです…）
※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね！
※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね！
【JavaScriptの場合】
jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を表にまとめてみたいと思います。
JavaScriptによる要素の追加・削除方法のまとめ表
| メソッド名 | できること | 記載方法 |
|---|---|---|
| appendChild（） | 子要素の一番最後に新しく要素追加 | element.appendchild(newElement) |
| insertBefore（） | 指定された子要素の一つ前にに新しく要素追加 | element.insertBefore(new,ref) |
| removeChild（） | （）の中で指定された子要素を削除 | element.appendchild(newElement) |
「親要素・子要素」を直接追加したり削除したりする方法は以上です。こうしてみると全て、「子要素」に関連した内容で、親要素を直接追加したり削除したりする命令方法がないのが特徴的ですね！（直接的な方法があったらすみませぬ。。。）
JavaScriptの要素追加と削除・イメージ図
注意点
- ①appendChild()の
( )の中には「追加したい要素」を書く。 - ②insertBefore()の
( )の中には(new,ref)のように引数を２つ書く必要がある。
※１番目には「追加したい要素」が入る、２番目に指定した「子要素」の１つ前に、新しく子要素として追加される。 - ③removeChild()の
( )の中には「削除したい子要素」を書く。
insertBefore()に関しては、子要素の一番最初だけでなく、２番目とか３番目に新しく要素を追加することもできますので何かと便利かも（？）
【jQueryの場合】
きましたjQuery！生のJavaScriptに比べると表現方法が多彩です。さすがデザイナーにも優しいjQueryですね！まずは、どんな方法があるか、一覧を表にまとめてみました！
jQueryによる要素の追加・削除方法のまとめ表
| メソッド名 | できること | 記載方法 |
|---|---|---|
| append() | 子要素の一番最後に新しく要素追加 | $(ele).append(newElement) |
| prepend() | 子要素の一番最初に新しく要素追加 | $(ele).prepend(newElement) |
| wrap() | $()の中で指定した要素に親要素newElementを追加 | $(ele).wrap(newElement) |
| wrapAll() | $()の中で指定された要素の子要素を複数まとめる形で親要素newElementを追加 | $(ele).wrapAll(newElement) |
| wrapInner() | $()の中で指定された要素の子要素の中身に親要素newElementを追加 | $(ele).wrapInner(newElement) |
| remove() | $（）の中で指定された要素を削除 | $(ele).remove() |
| empty() | $（）の中で指定された要素の中身を削除 | $(ele).empty() |
| unwrap() | $（）の中で指定された要素の親要素を削除 | $(ele).unwrap() |
いやー本当に色々な方法があるものですね！僕も今回まとめていて、へーっとうなるものもありました！ではでは、さっそくこちらもイメージ図を…
JavaScriptの要素追加と削除・イメージ図
注意点
- ①wrap()とwrapAll()とwrapInner()の違いに注意！（※下記サンプルコード参照）
- ②remove()とempty()の違いに注意！（※下記サンプルコード参照）
ここまでの内容を踏まえて、サンプルコードを下記に掲載しますので、ぜひご覧になってみてくださいね！
wrap()とwrapAll()とwrapInner()の違い・サンプルコード
See the Pen bNvbWa by Tatsuya Kosuge (@castero) on CodePen.
11535
remove()とempty()の違い・サンプルコード
わいわい
だわいわい
See the Pen vERBLG by Tatsuya Kosuge (@castero) on CodePen.
11535
まとめ
いかがでしたか？
今回の記事は、自分で書いていても非常にまとめるのに苦労したのが正直なところです……スペースの都合もありますが、それほどまでに表現が多彩！（特にjQuery）
もし「兄弟要素」などの取得や追加も含めて記載していたら、きっと後２回はこのシリーズは続いていたかもしれません。苦笑
次回は「CSSプロパティの記述順」について投稿する予定です！今回もお読み頂きありがとうございました！
Author Profile
Latest entries
- 2015.06.18コーディングを効率化する導入必至のツール【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！
- 2015.04.21読んでみた【書評】「10年使えるSEOの基本」を買ってみた
- 2015.03.02CSSマスター【CSS】CSSプロパティの記述順について考えてみた
- 2015.02.18Javascriptを学ぼう【JavaScript】（基礎）親要素・子要素の取得・追加まとめ③
