jQuery 插入元素-外部插入
作者：曾慶林
以下方法為在指定元素的相鄰位置（之前或之后）上插入內(nèi)容。
after()方法
該方法在匹配元素集合中的每個(gè)元素之后插入由參數(shù)指定的內(nèi)容并返回jQuery對象。
before()方法
此方法將參數(shù)指定的內(nèi)容插入到匹配元素集合中的每個(gè)元素之前，并返回jQuery對象。
after 案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("div").after("<h1>this is H1</h1>");
})
})
單擊完按鈕得到的html結(jié)構(gòu)
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<h1>this is H1</h1>1
before 案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("div").before("<h1>this is H1</h1>");
})
})
單擊完按鈕得到的html結(jié)構(gòu)
<button>按鈕</button>
<h1>this is H1</h1>
<div class="b">
<h2>this 我是h2</h2>
</div>
insertAfter()方法
該方法在匹配元素集合中的每個(gè)元素插入到目標(biāo)元素之后并返回jQuery對象。
insertBefore()方法
該方法在匹配元素集合中的每個(gè)元素插入到目標(biāo)元素之前并返回jQuery對象。
insertAfter () 案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("<h1>this is H1</h1>").insertAfter ($("div"))
})
})
單擊完按鈕得到的html結(jié)構(gòu)
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<h1>this is H1</h1>
insertBefore () 案例
html
<button>按鈕</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
js
$(function(){
$("button").click(function(){
$("<h1>this is H1</h1>").insertBefore ($("div"))
})
})
單擊完按鈕得到的html結(jié)構(gòu)
<button>按鈕</button>
<h1>this is H1</h1>
<div class="b">
<h2>this 我是h2</h2>
</div>
