Come inserire l'elemento come primo figlio?

Voglio aggiungere un div come primo elemento usando jquery su ogni clic di un pulsante

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

Prova la $.prepend()funzione.

Utilizzo

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

Demo

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

Estendendo ciò che ha detto @vabhatia, questo è ciò che vuoi in JavaScript nativo (senza JQuery).

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

Usa: $("<p>Test</p>").prependTo(".inner"); controlla la documentazione .prepend su jquery.com

parentNode.insertBefore(newChild, refChild)

Inserisce il nodo newChild come figlio di parentNode prima del nodo figlio esistente refChild. (Restituisce newChild.)

Se refChild è null, newChild viene aggiunto alla fine dell'elenco dei figli. In modo equivalente e più leggibile, usa parentNode.appendChild (newChild).

parentElement.prepend(newFirstChild);

Questa è una nuova aggiunta in (probabilmente) ES7. Ora è vanilla JS, probabilmente a causa della popolarità in jQuery. È attualmente disponibile in Chrome, FF e Opera. Transpilers dovrebbe essere in grado di gestirlo fino a quando non sarà disponibile ovunque.

PS È possibile anteporre direttamente le stringhe

parentElement.prepend('This text!');

Collegamenti: developer.mozilla.org - Polyfill

Obbligatorio qui

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

aggiunto da

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

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

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