jquery中append、prepend, before和after方法的区别（二）

1.append()与after()

这两个都是在元素的后面插入内容，不同的是前者是在元素内部插入（作为该元素的子元素），后者是在元素外部插入（作为该元素的兄弟元素）；但是这里我要讲的是，当用表单验证中用到这两个方法时的区别：append（）比较正常；而after（）则会没获取一次表单的焦点，after插入的内容就会增加一次，如下：

      

$('form :input').blur(function(){
var $parent=$(this).parent();
$parent.find(".formtips").remove();

//*********用户名
if( $(this).is('#name') ){
if(this.value==""){
var errorMsg='请输入您的姓名!';
$parent.after('<span class="formtips onError pull-right">'+errorMsg+'</span>');
}else{
var okMsg='输入正确!';
$parent.after('<span class="formtips onSuccess pull-right">'+okMsg+'</span>');
}
}
//*****验证电话号码
if( $(this).is('#phone') ){
if( this.value=="" || ( this.value!="" && !/^1[3|4|5|8]\d{9}$/.test(this.value) ) ){
var errorMsg = '请输入正确的号码.';
$parent.after('<span class="formtips onError pull-right">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.after('<span class="formtips onSuccess pull-right">'+okMsg+'</span>');
}
}
//*****验证邮件
if( $(this).is('#e_mail') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.after('<span class="formtips onError pull-right">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.after('<span class="formtips onSuccess pull-right">'+okMsg+'</span>');
}
}

}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});

$(".formT button:eq(0)").click(function(){
$("form :input").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false; alert(numError);
}else{
$.ajax({
scriptCharset: 'utf-8',
type:'post',
url:'http://www.******',
dataType:'text',
data:$('#form').serialize(),
//data:{'name':name,'phone':phone,'e_mail':e_mail,'content':content},
async: false,
success:function(result){
alert('我们会尽快与您联系,祝您生活愉快！');
},
error:function(result){
alert('网络异常，请稍后再试或联系客服!');
}
});
}
})

})

效果如下：



当把after() 换成append()时，效果如下：