【jQuery入門】要素を指定した位置に追加する

所有時間1分

今回はjQueryで指定した要素の前後に要素を追加する方法を紹介します。

目次

「append()」と「prepend()」

See the Pen append & prepend by Tsunagu (@Tsunagu) on CodePen.

$("要素1").append("要
素1の後に追加する要素");
$("要素1").prepend("要素1の前に追加する要素");

appendメソッドは指定した要素の後に要素を追加し、prependメソッドは指定した要素の前に要素を追加します。

<h1>
  <button>prepend</button>
  Hello World
  <button>append</button>
</h1>

append, prependで追加される要素は上のように指定した要素タグ内に追加されます。

「after()」と「before()」

See the Pen after & before by Tsunagu (@Tsunagu) on CodePen.

$("要素1").after("要素1の後に追加する要素");
$("要素1").before("要素1の前に追加する要素");

afterメソッドは指定した要素の後に要素を追加し、boforeメソッドは指定した要素の前に要素を追加します。

<button>before</button>
<h1>Hello World</h1>
<button>after</button>

after, beforeで追加される要素は上のように指定した要素タグ内に追加されます。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる