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
source

Les réponses à cette question fonctionnent également avec une liste vide d'éléments div enfants. Génial!

— Roland le

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
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
source

7

Utilisation: $("<p>Test</p>").prependTo(".inner"); Consultez la documentation .prepend sur jquery.com

— WizxX20
source

cela insérera plusieurs nœuds, un avant chaque enfant.

— Aurovrata

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
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
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
source

-1

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

— THAS
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
source

cela s'insérera avant chaque enfant, c'est-à-dire que vous finirez par insérer plusieurs nœuds.

— Aurovrata