how to add paragraph on top of div content

Question

How can I add multiple paragraph tag, newly tag on top within div container.

  

        
                      

              相关标签:
       
      

Answer 1

A more elegant way without jQuery:

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

This assumes there is already an element in the container btw.

Answer 2

Try using prepend instead of append.

Answer 3

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

Answer 4

Here is a way without 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

An example for non jQuery-users:

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

maybe not as short and nice though :)

Answer 6

Specific to your HTML, it would be:

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