Comment insérer un élément en tant que premier enfant?

96

Je veux ajouter un div comme premier élément en utilisant jquery à chaque clic sur un bouton

<div id='parent-div'>
    <!--insert element as a first child here ...-->

    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>

</div>
jquery prepend css-selectors Rana Imtiaz
la source
Les réponses à cette question fonctionnent également avec une liste vide d'éléments div enfants. Génial!
Roland le

Réponses:

163

Essayez la $.prepend()fonction.

Usage

$("#parent-div").prepend("<div class='child-div'>some text</div>");

Démo

var i = 0;
$(document).ready(function () {
    $('.add').on('click', function (event) {
        var html = "<div class='child-div'>some text " + i++ + "</div>";
        $("#parent-div").prepend(html);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent-div">
    <div>Hello World</div>
</div>
<input type="button" value="add" class="add" />
Développer l'extrait

Mohamed Nuur
la source
le problème avec cette solution est qu'elle s'insère en tant que premier enfant et non avant les enfants de la liste, si le conteneur parent contient différents éléments enfants et que l'on veut insérer avant un groupe spécifique de nœuds enfants, cela ne fonctionnera pas.
Aurovrata
Au début, il n'était pas évident pour moi que cette solution fonctionne également s'il n'y a aucun élément div enfant. prepend () s'insère dans la liste vide et crée le premier élément div enfant. Bien sûr, append () fonctionne également, mais la liste est créée dans un autre ordre.
Roland le
17

En prolongeant ce que @vabhatia a dit, c'est ce que vous voulez en JavaScript natif (sans JQuery).

ParentNode.insertBefore(<your element>, ParentNode.firstChild);

dtsn
la source
5 
parentNode.insertBefore(newChild, refChild)

Insère le nœud newChild en tant qu'enfant de parentNode avant le nœud enfant existant refChild. (Renvoie newChild.)

Si refChild est nul, newChild est ajouté à la fin de la liste des enfants. De manière équivalente, et plus lisible, utilisez parentNode.appendChild (newChild).

Varun Bhatia
la source
copier et coller littéralement à partir d'un autre message. peut-être faire référence à la question spécifique et comment elle se rapporte?
roberthuttinger
1 
parentElement.prepend(newFirstChild);

Il s'agit d'un nouvel ajout dans (probablement) ES7. Il s'agit maintenant de JS vanilla, probablement en raison de la popularité de jQuery. Il est actuellement disponible dans Chrome, FF et Opera. Les transpileurs devraient pouvoir le gérer jusqu'à ce qu'il devienne disponible partout.

PS Vous pouvez directement ajouter des chaînes 

parentElement.prepend('This text!');

Liens: developer.mozilla.org - Polyfill

Gibolt
la source
0

Requis ici

<div class="outer">Outer Text <div class="inner"> Inner Text</div> </div>

ajouté par

$(document).ready(function(){ $('.inner').prepend('<div class="middle">New Text Middle</div>'); });

Chintan7027
la source
-1

$(".child-div div:first").before("Your div code or some text");

THAS
la source
il n'y a pas de nœuds enfants en dessous de div enfant
Aurovrata
-1 
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
Dit
la source
cela s'insérera avant chaque enfant, c'est-à-dire que vous finirez par insérer plusieurs nœuds.
Aurovrata