web-dev-qa-db-fra.com

Comment ajouter le paragraphe sur le contenu de la DIV

Comment puis-je ajouter plusieurs balises de paragraphe, nouvellement étiquette 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 Ajout, mais chaque fois que je clique sur le bouton Ajouter au bas J'en ai besoin pour ajouter au-dessus de tout le paragraphe, veuillez vous aider.

javascriptjquerydom
24
Yasir

Vous pouvez utiliser Prepend 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'));

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

46
moff

Un moyen plus élégant sans JQuery:

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

Cela suppose qu'il existe déjà un élément dans le conteneur BTW.

36
Mattijs

Un exemple pour les utilisateurs non JQuery:

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

peut-être pas aussi court et agréable que :)

14
karl

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
Defender

Essayez d'utiliser PREPEND au lieu de l'annexe.

2
tvanfosson

Spécifique à votre HTML, ce serait:

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