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.
Position the div relatively ( position: relative; ), and then the text absolutely ( position:absolute; ). Make sure the text is inside an element inside the div, and then set the nested element's top position to a negative number until it is positioned to your liking.
For that you can use position: absolute; for the overlapping div . And add any text to that div. You can use class or id to style them! In your image, you are using position: absolute; for image tag too.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With