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()時，效果如下：