【jQuery-10】prepend() append() を使いHTMLに要素を追加【初心者向き】

HTMLに関連する二つのメソッドを紹介します。

一番上に要素を挿入する prepend()

一番下に要素を挿入する append() 

同じ機能を持つメソッドですが、挿入する場所が違うことに注意して効果的に使用しましょう！

prepend()を使って要素を追加する

See the Pen prepend() by taichi (@taichi_na) on CodePen.

上の例では prepend() メソッドを使って、指定したセレクタに要素を追加してみます。

<ul>内に一つ<li>を追加するスクリプトです。

下のボタンを押すと、<li>menu0</li> が一番上に追加されます。

追加されるのはあくまで一番上になるので要注意です。

prepend()を使って要素を移動させる

See the Pen prepend()2 by taichi (@taichi_na) on CodePen.

今度は要素の順番を指定できる疑似クラス（li:last-child など）を指定して、その要素をピックアップして最上段に移動させてみました。

ここでも移動先は指定することはできません。あくまで一番上に移動となります。

li:last-child とは、並んでいる <li> 要素の一番下のものを指定する疑似クラスです。CSSの話になってしまうのでここでは詳細は省きます。

なお、最初の追加のときと違い $() で囲んでいることに注意しましょう。

append() を使って要素を追加する

See the Pen append() by taichi (@taichi_na) on CodePen.

今度は似たような append() を使ってみましょう。

先ほどの prepend() は親要素にたいして最上段に子要素を追加しましたが、今回のこの append() は最下段に追加してくれます。

そのほかは prepend() と同じです。

append() を使って要素を移動させる

See the Pen appemd()2 by taichi (@taichi_na) on CodePen.

今度は最上段にある要素を一番下に移動させるスクリプト書いてみましょう。

append() の最下段に挿入する命令を利用しています。

ここでも先ほどの prepend() の時と同様に、$() で囲んでいることに注意をしてください。

li:first-child とは連続する要素の一番上のもの、ということですね。