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;

可能不是那么短而且好看:)。

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而不是追加。

Answer 6

特定于您的HTML，它将是：

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

如何在div内容之上添加段落

6 个答案: