如何在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>

我正在使用追加,但每次我点击按钮它添加到底部我需要它添加在所有段的顶部请帮助.

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

这假设容器btw中已经有一个元素.

Answer 3

非jQuery用户的示例:

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

也许不是那么短而且不错:)