web-dev-qa-db-fra.com

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

Je veux ajouter un div en tant que 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>
jqueryprependcss-selectors
79
Rana Imtiaz

Essayez la fonction $.prepend() .

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" />

133
Mohamed Nuur

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

7
WizxX20
parentNode.insertBefore(newChild, refChild)

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

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

5
Varun Bhatia
parentElement.prepend(newFirstChild);

Ceci est un nouvel ajout dans (probable) ES7. C'est maintenant Vanilla JS, probablement en raison de la popularité de jQuery. Il est actuellement disponible dans Chrome, FF et Opera. Transpilers devrait pouvoir le gérer jusqu'à ce qu'il soit disponible partout.

P.S. Vous pouvez directement ajouter des chaînes 

parentElement.prepend('This text!');

Liens: developer.mozilla.org - Polyfill

1
Gibolt
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
0
Sayed

Obligatoire 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>'); });

0
Chintan7027