【JavaScript】(基礎)親要素・子要素の取得・追加まとめ③

こんにちは!
unitopi新米ライターの、ケインでございます。

このシリーズも最終回。今回も、JavaScriptにおいて基本的だけど忘れがちな、JavaScript(jQuery)における「親要素・子要素の取得・追加(削除)」について、今回は「要素の追加と削除」のお話をさせていただきます!

ちなみに今回は、説明の仕方がこれまでの2回と異なるアプローチになっているので、その点ご承知おきください!(※なぜなら紹介する量が多そうだからです…)

※サンプルコードは、「JS」タブや「HTML」タブなどを交互に見ていってくださいね!
※このシリーズのこれまでの記事は「その①」及びその②になります。まだご覧になっていない方で、合わせて勉強したい方はぜひご覧くださいね!

【JavaScriptの場合】

jQueryに比べると少ないですが、それなりに表現方法の数がありますので、どんなものがあるか、一覧を表にまとめてみたいと思います。

JavaScriptによる要素の追加・削除方法のまとめ表

メソッド名 できること 記載方法
appendChild() 子要素の一番最後に新しく要素追加 element.appendchild(newElement)
insertBefore() 指定された子要素の一つ前にに新しく要素追加 element.insertBefore(new,ref)
removeChild() ()の中で指定された子要素を削除 element.appendchild(newElement)

「親要素・子要素」を直接追加したり削除したりする方法は以上です。こうしてみると全て、「子要素」に関連した内容で、親要素を直接追加したり削除したりする命令方法がないのが特徴的ですね!(直接的な方法があったらすみませぬ。。。)

JavaScriptの要素追加と削除・イメージ図

JavaScriptの要素追加と削除・イメージ図

注意点

  • ①appendChild()の( )の中には「追加したい要素」を書く。
  • ②insertBefore()の( )の中には(new,ref)のように引数を2つ書く必要がある。
    ※1番目には「追加したい要素」が入る、2番目に指定した「子要素」の1つ前に、新しく子要素として追加される。
  • ③removeChild()の( )の中には「削除したい子要素」を書く。

insertBefore()に関しては、子要素の一番最初だけでなく、2番目とか3番目に新しく要素を追加することもできますので何かと便利かも(?)

【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の要素追加と削除・イメージ図

jQueryの要素追加と削除・イメージ図

注意点

  • ①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)
もし「兄弟要素」などの取得や追加も含めて記載していたら、きっと後2回はこのシリーズは続いていたかもしれません。苦笑

次回は「CSSプロパティの記述順」について投稿する予定です!今回もお読み頂きありがとうございました!

フォローして続編をチェック

@universionsをフォロー