jQueryでの要素の追加方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでの要素の追加方法について、簡単に解説していきます。

要素内の末尾に追加

jQueryでは要素の追加も簡単です。

要素.appendメソッドで要素内の末尾に追加します。

$('#hoge').append('<span>ほげ末尾</span>');

上記のコードでは、hogeというidを持つ要素内の末尾にspan要素を追加します。

要素内の先頭に追加

要素内の先頭に追加もできます。

その場合には、prependメソッドを使います。

$('#hoge').prepend('<span>ほげ先頭</span>');

上記の例は、hogeというidを持つ要素内の先頭にspan要素を追加するコードです。

要素の前後に追加

要素の前後に追加することも可能です。

$('ul').after('<p>追加されました</p>');

上記のように、afterメソッドで要素の直後に追加できます。

$('ul').before('<p>追加されました</p>');

一方で、上記のように、beforeメソッドを使うことで要素の直前に追加できます。