Question

ı know the topic is not specific. let me tell you.

ı have a text box and button. when you enter something and click button its creating div and appending it to another div. but the problem is its must append it to top of the page. its going to be second div.

jquery code:

$('#send').click(function() {
   var not=$('#not').val();

   $.ajax({
    type:"POST",            
    url: "some.php?islem=not",
    data:{not:not},
    success: function(result){
        $('#comment_box').append('<div class="comment">'+not+'</div>'); 
    }   
   });
});

html code:

<textarea style="width: 794px; height: 48px;" id="not"></textarea>
<input type="button" value="Yolla" style="margin-top:35px;" id="send"/>

<div id="comment_box">
    <div class="comment">comment-1</div>
    <div class="comment">there is comment in here-2</div>
    <div class="comment">there is comment in here-3</div>
    <div class="comment">there is comment in here-4</div>
    <div class="comment">there is comment in here-5</div>
</div>

when ı add something the new div is shown after comment-1, ı want it to be first. because its the latest comment and it must be first, at the top of the page.

sory for bad english.

Answer 1

I’d suggest more or less the same thing, but with a slight twist on your originally-posted code:

$('<div />', {'class' : 'comment'}).prependTo('#comment_box');

The element-creation specifies the element to be created, and as the second parameter takes an object defining the attribute/properties with which that element should be created.

This makes it a little easier to maintain code in the long run (in large projects), though admittedly this is, more or less, a purely personal opinion with no metrics with which I can offer support for this approach.

Edited in response to question from OP:

where should ı insert text? ı want to add div with data.

To add text to the element, there’s two approaches:

$('<div />', {'class' : 'comment', 'text' : not}).prependTo('#comment_box');

JS Fiddle proof-of-concept.

Or:

$('<div />', {'class' : 'comment'}).text(not).prependTo('#comment_box');

JS Fiddle proof-of-concept.

Edited in response to question from OP:

can ı ask 1 last question. ı want to add after not but its not working

For this, you need to get a reference to the div you inserted and then, simply insert the br element after that div:

var newDiv = $('<div />', {'class' : 'comment'}).text(not).prependTo('#comment_box');
$('<br />').insertAfter(newDiv);

If you want the br within the div you’ve just created, then simply use append():

$('<div />', {'class' : 'comment', 'text' : not}).append('<br />').prependTo('#comment_box');

Or:

$('<div />', {'class' : 'comment'}).text(not).append('<br />').prependTo('#comment_box');

References:

• append().
• jQuery(html, props), it’s the last part of that section.
• prependTo().
• text().