how to add paragraph on top of div content

Question

How can I add multiple paragraph tag, newly tag on top within div container.

<div id="pcontainer">
  <p>recently added on top every time on click event recently added paragarph on top</p>
  <p>added before recent</p>
</div>

I am using append but every time I click button it add to bottom I need it to added on top of all paragraph please help.

Answer 1

Try using prepend instead of append.

Answer 2

You may use prepend to add the paragraph at the top of the container:

// HTML: <div><p>Lorem ipsum</p></div>
$('div').prepend('<p>Bla bla bla');

Update: Regarding your comment about how to fade in the paragraph - use fadeIn:

$("#pcontainer").prepend($('<p>This paragraph was added by jQuery.</p>').fadeIn('slow'));

A working demo: http://jsbin.com/uneso

Answer 3

Specific to your HTML, it would be:

$("#pcontainer").prepend('<p>here's a new paragraph!</p>');

Answer 4

An example for non jQuery-users:

document.getElementById('pcontainer').innerHTML = '<p>new paragraph</p>' + document.getElementById('pcontainer').innerHTML;

maybe not as short and nice though :)