jquery?追加元素append、prepend、before、after用法與區(qū)別分析
功能說明
對(duì)比的看
before和prepend
before:在被選元素之前添加的內(nèi)容（內(nèi)容外面）
prepend:在被選元素的前面添加的內(nèi)容（內(nèi)容的里面）
同理
after和append
after:在被選元素之后添加的內(nèi)容（內(nèi)容外面）
append:在被選元素的后面添加的內(nèi)容（內(nèi)容的里面）
jquery的插入外部
after() 元素外的后面插入
insertAfter() 把內(nèi)容插入到元素外的后面
before() 在元素外的前面插入內(nèi)容
insertBefore() 把內(nèi)容插入到目標(biāo)元素外的后面
詳細(xì)說明
append與prepedn都是元素里面操作，這樣就比較簡單了
一、after()和before()方法的區(qū)別
after()——其方法是將方法里面的參數(shù)添加到j(luò)query對(duì)象后面去；
如：A.after(B)的意思是將B放到A后面去；
before()——其方法是將方法里面的參數(shù)添加到j(luò)query對(duì)象前面去。
如：A.before(B)的意思是將A放到B前面去；
二、insertAfter()和insertBefore()的方法的區(qū)別
其實(shí)是將元素對(duì)調(diào)位置；
可以是頁面上已有元素；也可以是動(dòng)態(tài)添加進(jìn)來的元素。
如：A.insertAfter(B);即將A元素調(diào)換到B元素后面；
如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后，就變?yōu)?lt;p>HELLO</p><span>CC</span>了。兩者位置調(diào)換了
三、append()和appendTo()方法的區(qū)別
append()——其方法是將方法里面的參數(shù)添加到j(luò)query對(duì)象中來；
如：A.append(B)的意思是將B放到A中來，后面追加,A的子元素的最后一個(gè)位置；
appendTo()——其方法是將jquery對(duì)象添加到appendTo指定的參數(shù)中去。
如：A.appendTo(B)的意思是將A放到B中去，后面追加,B的子元素的最后一個(gè)位置；
四、prepend()和prependTo()方法的區(qū)別
append()——其方法是將方法里面的參數(shù)添加到j(luò)query對(duì)象中來；
如：A.append(B)的意思是將B放到A中來，插入到A的子元素的第一個(gè)位置；
appendTo()——其方法是將jquery對(duì)象添加到appendTo指定的參數(shù)中去。
如：A.appendTo(B)的意思是將A放到B中去，插入到B的子元素的第一個(gè)位置；
例子
1、insert局部方法
/**
* 在父級(jí)元素上操作DOM
* @param {Object} parent 父級(jí)元素，可以是element，也可以是Yquery對(duì)象
* @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend
* @param {*} any 任何：string/text/object
* @param {Number} index 序號(hào)，如果大于0則復(fù)制節(jié)點(diǎn)
* @return {Undefined}
* @version 1.0
* 2013年12月2日17:08:26
*/
function _insert(parent, position, any, index) {
if ($.isFunction(any)) {
any = any.call(parent);
}
// 字符串
if ($.isString(any)) {
if (regTag.test(any)) {
parent.insertAdjacentHTML(position, any);
} else {
parent.insertAdjacentText(position, any);
}
}
// 數(shù)字
else if ($.isNumber(any)) {
parent.insertAdjacentText(position, any);
}
// 元素
else if ($.isElement(any)) {
parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any);
}
// Yquery
else if (_isYquery(any)) {
any.each(function() {
_insert(parent, position, this);
});
}
}2、append、prepend、before、after
$.fn = {
/**
* 追插
* 將元素后插到當(dāng)前元素（集合）內(nèi)
* @param {String/Element/Function} any
* @return this
* @version 1.0
* 2013年12月29日1:44:15
*/
append: function(any) {
return this.each(function(index) {
_insert(this, 'beforeend', any, index);
});
},
/**
* 補(bǔ)插
* 將元素前插到當(dāng)前元素（集合）內(nèi)
* @param {String/Element/Function} any
* @return this
* @version 1.0
* 2013年12月29日1:44:15
*/
prepend: function(any) {
return this.each(function(index) {
_insert(this, 'afterbegin', any, index);
});
},
/**
* 前插
* 將元素前插到當(dāng)前元素（集合）前
* @param {String/Element/Function} any
* @return this
* @version 1.0
* 2013年12月29日1:44:15
*/
before: function(any) {
return this.each(function(index) {
_insert(this, 'beforebegin', any, index);
});
},
/**
* 后插
* 將元素后插到當(dāng)前元素（集合）后
* @param {String/Element/Function} any
* @return this
* @version 1.0
* 2013年12月29日1:44:15
*/
after: function(any) {
return this.each(function(index) {
_insert(this, 'afterend', any, index);
});
}
};3、prependTo、prependTo、insertBefore、insertAfter
這些帶后綴的與上面的不同的是，返回的結(jié)果不一樣。如：
$('#demo').append('<a/>');
// => 返回的是 $('#demo')
$('<a/>').appendTo($('#demo'));
// => 返回的是$('a');因此兩者的關(guān)系只是返回結(jié)果不一樣，其他的都一樣，可以這么解決：
_each({
appendTo: 'append',
prependTo: 'prepend',
insertBefore: 'before',
insertAfter: 'after'
}, function(key, val) {
$.fn[key] = function(selector) {
this.each(function() {
$(selector)[val](this);
});
return this;
};
});jquery 追加元素的方法（append prepend after before 的區(qū)別）
append() 方法在被選元素的結(jié)尾插入內(nèi)容。
prepend() 方法在被選元素的開頭插入內(nèi)容。
after() 方法在被選元素之后插入內(nèi)容。
before() 方法在被選元素之前插入內(nèi)容。
<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
<ul>
<li>第一個(gè)li標(biāo)簽</li>
</ul>
</div>
<script>
//append
$('.testdiv ul').append('<li>append 插入的li</li>');
//prepend
$('.testdiv ul').prepend('<li>prepend 插入的li</li>');
//after
$('.testdiv ul').after('<li>after 插入的li</li>');
//before
$('.testdiv ul').before('<li>before 插入的li</li>');
</script>效果圖
html結(jié)構(gòu)圖
- 解決jQuery使用append添加的元素事件無效的問題
- jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案
- jQuery 追加元素的方法如append、prepend、before
- jQuery中append、insertBefore、after與insertAfter的簡單用法與注意事項(xiàng)
- jQuery使用before()和after()在元素前后添加內(nèi)容的方法
- jquery.ajax之beforeSend方法使用介紹
- jquery追加元素的所有方法全面深入實(shí)例講解（append、prepend、after、before、wrap等等）
相關(guān)文章
使用了jq的width()方法時(shí)在ff跟ie下運(yùn)行問題不大，但是到了chrome上，就出現(xiàn)問題2014-05-05
jQuery 創(chuàng)建Dom元素代碼，需要的朋友可以參考下。2010-05-05
$.ajax()跟($.post(),$.get())最主要的差別就是 成功回調(diào)后,執(zhí)行success. . $.post(),$.get()就只能簡單的做下傳遞 ,返回. .后續(xù)工作沒法繼續(xù).所以看情況調(diào)用2012-09-09
基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)類似跑馬燈的效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)效果類似跑馬燈,需要的朋友可以參考下2014-06-06
jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫過ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery，所以又用jquery重新寫了個(gè),需要的朋友可以參考下2014-06-06
jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候 都有個(gè)記住用戶名 記住密碼 的兩個(gè)checkbox 多選框用jquerymobile 做頁面 ，當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值2012-04-04
jquery input checked全選與反選1.3.2的版本
jquery 全選與反選1.3.2的版本2009-05-05
jquery layui分頁控件在項(xiàng)目開發(fā)階段經(jīng)常用到，下面通過本文給大家介紹jQuery layui分頁控件的使用，非常不錯(cuò)，感興趣的朋友一起看下吧2016-08-08
jQuery使用ajax_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery使用ajax的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07