admin管理员组

文章数量:1344975

I'm trying to post ment with an AJAX post. But last ment element contains submit button. And after appending, new item appears after submit button.

<div class="mentContainer" >

    <div class="ment">
        <div class="mentText">Any ment1 ... </div>
    </div>

    <div class="ment">
        <div class="mentText">Any ment2 ... </div>
    </div>
        ....................................
    <div class="ment"> 
        <div class="sendPanel">
            <input type="submit" value="Post" />
        </div>
    </div>

</div>

and result of posting request:

success: function (result)  {
    if (result.success) {
         $('mentContainer').append('<div class="ment"><div class="mentText">' + result.text + '</div></div>');
    }   
} 

I want to keep submit button on the end always. How can I do this?

I'm trying to post ment with an AJAX post. But last ment element contains submit button. And after appending, new item appears after submit button.

<div class="mentContainer" >

    <div class="ment">
        <div class="mentText">Any ment1 ... </div>
    </div>

    <div class="ment">
        <div class="mentText">Any ment2 ... </div>
    </div>
        ....................................
    <div class="ment"> 
        <div class="sendPanel">
            <input type="submit" value="Post" />
        </div>
    </div>

</div>

and result of posting request:

success: function (result)  {
    if (result.success) {
         $('.mentContainer').append('<div class="ment"><div class="mentText">' + result.text + '</div></div>');
    }   
} 

I want to keep submit button on the end always. How can I do this?

• javascript
• jquery
• ajax
• post
• append

Share Follow edited Dec 10, 2016 at 3:01 eightShirt 1,44733 gold badges1616 silver badges3131 bronze badges asked Jul 14, 2013 at 17:51 Jeyhun RahimovJeyhun Rahimov 3,78766 gold badges4848 silver badges9393 bronze badges 1

• Thanks for all for help. – Jeyhun Rahimov Commented Jul 14, 2013 at 18:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try this

  $('<div class="ment"><div class="mentText">' + result.text + '</div></div>')
   .insertBefore('mentContainer .ment:last-child'); 

Or even better

$('<div>', {'class': 'ment'}).append(
    $('<div>', {'class': 'mentText', text: result.text})
).insertBefore('.mentContainer .ment:last-child');

This one is better for performance

Demo

jQuery last-child

jQuery insertBefore

You can use the :last pseudo-selector:
try this:  

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

Try this :

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

I know this question specifically asked about jQuery but this can be done with plain JS quite neatly, with the insertBefore() function, MDN. (I came across this post while looking for a solution to a similar problem but not using jQuery)

ul = document.getElementById('my-list-id'); //Get the list from the DOM
li = document.createElement('li'); // Create the element to append

ul.insertBefore(li, ul.lastChild); // Append the element before the last child

本文标签： javascriptAppend element not to endbefore last element in jQueryStack Overflow