comment ajouter un paragraphe au contenu de div

Comment puis-je ajouter plusieurs tags de paragraphe, nouvellement tags sur le dessus dans le conteneur 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>

j'utilise append mais chaque fois que je clique sur le bouton Ajouter au fond, j'en ai besoin pour ajouter au-dessus de tout paragraphe s'il vous plaît aider.

23
demandé sur moff 2009-04-09 16:42:59

6 réponses

Vous pouvez utiliser ajouter pour ajouter le paragraphe en haut du conteneur:

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

mise à Jour: en ce qui concerne votre commentaire sur la façon de s'effacer dans le paragraphe - utilisez fadeIn:

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

Un travail de démonstration: http://jsbin.com/uneso

44
répondu moff 2009-04-17 15:35:37

Une façon plus élégante sans jQuery:

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

ceci suppose qu'il y a déjà un élément dans le conteneur btw.

30
répondu Mattijs 2013-09-13 16:10:27

Un exemple pour jQuery non-utilisateurs:

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

peut-être pas le plus court et le bien quand même :)

14
répondu 2009-07-09 17:36:47

voici un moyen sans 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);
     }
}
3
répondu Defender 2012-10-29 08:01:47

Essayez d'utiliser ajouter au lieu de l'ajouter.

2
répondu tvanfosson 2009-04-09 12:45:52

Spécifiques à votre code HTML, ce serait:

$("#pcontainer").prepend('<p>here's a new paragraph!</p>');
0
répondu Brandon Montgomery 2009-04-09 12:51:27