jQuery挿入要素-外部挿入
作者:曾慶林
次の方法では、指定した要素の隣接する位置(前または後)にコンテンツを挿入します.
after()メソッド
このメソッドは、エレメントセット内の各エレメントに一致した後、パラメータによって指定された内容を挿入し、jQueryオブジェクトに戻ります.
before()メソッド
このメソッドでは、パラメータで指定した内容を一致する要素のセット内の各要素に挿入し、jQueryオブジェクトを返します.
afterケースhtml

       

    
this   h2

js

$(function(){
    $("button").click(function(){
        $("div").after("
this is H1
");
    })
})

ボタンをクリックしたhtml構造

       

    
this   h2

this is H1
1

beforeケースhtml

       

    
this   h2

js

$(function(){
    $("button").click(function(){
        $("div").before("
this is H1
");
    })
})

ボタンをクリックしたhtml構造

  
this is H1

    
this   h2

InsertAfter()メソッド
このメソッドは、一致する要素セット内の各要素をターゲット要素に挿入した後、jQueryオブジェクトを返します.
InsertBefore()メソッド
このメソッドは、一致する要素セット内の各要素がターゲット要素に挿入される前にjQueryオブジェクトを返します.
insertAfter()ケースhtml

       

    
this   h2

js

$(function(){
    $("button").click(function(){
        $("
this is H1
").insertAfter ($("div"))
    })
})

ボタンをクリックしたhtml構造

  

    
this   h2

this is H1

insertBefore()ケースhtml

       

    
this   h2

js

$(function(){
    $("button").click(function(){
        $("
this is H1
").insertBefore ($("div"))
    })
})

ボタンをクリックしたhtml構造

  
this is H1

    
this   h2