prependとappendの違いprependとappendの違いはprependは指定した要素の要素の先頭に追加されます。appendは指定した要素の最後に要素が追加されます。共通点は指定した要素に要素を追加することです。違うのは追加する場所ですね。先頭に要素の追加prependの英語の意味は先頭に追加という意味です。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>タグを書かないで文字列だけを指定すると先頭のタグの文字列の前に文字列が追加されてしまいます。実行結果はpinkredpinkGreenpinkyellowpinkBlue文字列がh3の前に追加されてしまってます。新しく要素が追加されていません。これはこれで別に使い道がありそうな気もしますが要素が同じなら同じ要素を指定して追加をしてしてやりましょう。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>実行結果はpinkredpinkGreenpinkyellowpinkBlueあれ、期待してたのと違う。h3タグの全ての先頭に要素が追加されました。コンピュータは正直者ですね。私の指定の仕方が悪かったです。指示は明確にしないといけません。redクラスだけの先頭に追加したいだからredクラスとセレクタに指示してやらないとね。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>実行結果はpinkredGreenyellowBlueちゃんと先頭に表示されましたね。最後に要素の追加appendの英語の意味は添える,付加[追加]する。追加するは一緒ですね。基本的な動作はprependと一緒ですね。挿入場所だけ違います。文字列だけだと要素の末尾に表示されます。redクラスの末尾に追加しましょう。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>実行結果はredpinkGreenyellowBlueちゃんとredクラスの最後に書かれてますね。このサンプルだと追加したいクラスをhtmlで指定しないといけないみたいですがこの為だけにクラスの追加はどうなんでしょうね。htmlで直接書かなくてもaddclassメソッドで動的に追加できますので合わせ技ということで書いておきますね。Blueにブルークラスを動的に追加して最後にpinkを挿入します。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>実行結果はredGreenyellowBluepinkちゃんとできましたね。last-childdで要素をクラスを追加してちゃんとクラスで指定してます。気づいた方もいると思いますがクラス指定する意味ありませんよね。last-childdでそのまま書けよ(笑)三流プログラマーの本領発揮してしまいました。class=”red”>red</h3><h3>Green</h3><h3>yellow</h3><h3>Blue</h3></div></body></html>実行結果は同じですが一回の処理なのでこのほうが高速化できてます。セレクタは便利ですね。処理のタイミングや条件があるならクラス使ってもいいと思います。セレクタで指定するかhtmlにクラス書くかは自由です多分。コメントをキャンセルメールアドレスが公開されることはありません。first-childは一番最初の子要素を指定します。hoverはマウスを乗せたり外したりしたときに起動するイベントです。