как добавить абзац поверх содержимого div

Question

Как добавить тег с несколькими абзацами, новый тег сверху в контейнере div.

<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>

Я использую команду append, но каждый раз, когда я нажимаю кнопку, она добавляет внизу, мне нужно, чтобы она добавлялась поверх всего абзаца, помогите.

Answer 1

Вы можете использовать prepend , чтобы добавить абзац вверху контейнера:

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

Обновление : Что касается вашего комментария о том, как исчезать в абзаце - используйте fadeIn :

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

Рабочая демоверсия: http://jsbin.com/uneso

Answer 2

Более элегантный способ без jQuery:

var container = document.getElementById('pcontainer');
container.insertBefore(document.createElement("p"), container.firstChild);

Предполагается, что в контейнере уже есть элемент.

Answer 3

Пример для не jQuery-пользователей:

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

может быть не такой короткий и приятный, хотя:)

Answer 4

Вот способ без jQuery:

function prependParagraphs()
{
     var choosenDiv = document.getElementById("pcontainer");
     for(var i=0; i<5; i++)
     {
         var newP = document.createElement("p");
         var text = document.createTextNode("new paragraph number: " + i);
         newP.appendChild(text);
         choosenDiv.insertBefore(newP, choosenDiv.firstChild);
     }
}

Answer 5

Попробуйте использовать prepend вместо append.

Answer 6

Для вашего HTML это будет:

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