jQueryオブジェクト .after()

jQueryオブジェクトで選択した要素の直後（兄弟要素）にコンテンツが追加される。つまり、選択要素と同じ階層にコンテンツが追加される。

目次

  1. 構文
  2. 引数
  3. 例
  4. afterとappendの違い
  5. 関連項目
  6. 参考文献

構文

jQueryObject.after(content[,content])
jQueryObject.after(function(index){statements})

引数

content
挿入するコンテンツ(HTML文字列、DOM要素、要素の配列又はjQueryオブジェクト)
function
HTML文字列、DOM要素又はjQueryオブジェクトを返す関数を指定する。
index
マッチした要素のインデックス番号(0始まり)

例

jQueryオブジェクトのafterメソッドで要素のうしろに別の要素を追加する例を次に示す。

HTML

<div id="div1">div1</div>
<div id="div2">div2</div>

JavaScript

$("#div1").after("<div>div3</div>");

実行結果

div1
div2

afterとappendの違い

jQueryオブジェクトのメソッドである after() と append() の主な違いは、コンテンツを追加する場所である。

after() は選択要素の直後（兄弟要素）にコンテンツが追加される。つまり、選択要素と同じ階層にコンテンツが追加される。

HTML:

<div id="container">
  <p>Example</p>
</div>

JavaScript:

$("#container").after("<p>After Container</p>");

結果:

<div id="container">
  <p>Example</p>
</div>
<p>After Container</p>

append() は選択要素内部の末尾（子要素）にコンテンツが追加される。つまり、選択要素の子要素としてコンテンツが追加される。

HTML:

<div id="container">
  <p>Example</p>
</div>

JavaScript:

$("#container").append("<p>After Container</p>");

結果:

<div id="container">
  <p>Example</p>
  <p>After Container</p>
</div>

関連項目

参考文献