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

Как добавить несколько тегов абзаца, новый тег сверху в контейнере 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, но каждый раз, когда я нажимаю кнопку, она добавляется к нижней части, мне нужно, чтобы она добавилась поверх всего абзаца, пожалуйста, помогите.

Ответы

Ответ 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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 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);
     }
}

Ответ 5

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

Ответ 6

Специфично для вашего HTML, это будет:

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