Element append nie do końca, przed ostatnim elementem w jQuery

Question

Próbuję opublikować komentarz z postem AJAX. Ale ostatni element comment zawiera przycisk Wyślij. Po dodaniu nowy element pojawi się po przycisku przesyłania.

<div class="commentContainer" > 

    <div class="comment"> 
     <div class="commentText">Any comment1 ... </div> 
    </div> 

    <div class="comment"> 
     <div class="commentText">Any comment2 ... </div> 
    </div> 
     .................................... 
    <div class="comment"> 
     <div class="sendPanel"> 
      <input type="submit" value="Post" /> 
     </div> 
    </div> 

</div> 

i wynikiem żądania publikacji:

success: function (result) { 
    if (result.success) { 
     $('.commentContainer').append('<div class="comment"><div class="commentText">' + result.text + '</div></div>'); 
    } 
} 

Chcę trzymać przycisk Prześlij na końcu zawsze. Jak mogę to zrobić?

Answer 1

Spróbuj

$('<div class="comment"><div class="commentText">' + result.text + '</div></div>') 
    .insertBefore('commentContainer .comment:last-child'); 

lub nawet lepiej

$('<div>', {'class': 'comment'}).append(
    $('<div>', {'class': 'commentText', text: result.text}) 
).insertBefore('.commentContainer .comment:last-child'); 

Ten jest lepszy pod kątem wydajności

Demo

jQuery last-child

jQuery insertBefore

Answer 2

Spróbuj tego:

success: function (result) 
    { 
     if (result.success) 
     { 
      $('<div class="comment"><div class="commentText">' + result.text + '</div></div>').insertBefore('.commentContainer .comment:last'); 
     } 
    } 

Answer 3

Można użyć: ostatnie pseudo-selektor:
spróbuj tego:

success: function (result)  
    { 
        if (result.success)  
        { 
            $('.commentContainer').find('div:last').before('<div class="comment"><div class="commentText">' + result.text + '</div></div>'); 
        }    
    }