Jak wstawić element jako pierwsze dziecko?

Chcę dodać element div jako pierwszy element za pomocą jquery przy każdym kliknięciu przycisku

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

Spróbuj $.prepend() funkcję.

Stosowanie

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

Próbny

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

Rozszerzając to, co powiedział @vabhatia, tego chcesz w natywnym JavaScript (bez JQuery).

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

Zastosowanie: $("<p>Test</p>").prependTo(".inner"); Zapoznaj się z dokumentacją .prepend na jquery.com

parentNode.insertBefore(newChild, refChild)

Wstawia węzeł newChild jako element podrzędny parentNode przed istniejącym węzłem podrzędnym refChild. (Zwraca newChild.)

Jeśli refChild ma wartość null, nowyChild jest dodawany na końcu listy dzieci. Równoważnie i czytelniej użyj parentNode.appendChild (newChild).

parentElement.prepend(newFirstChild);

Jest to nowy dodatek w (prawdopodobnie) ES7. Jest to teraz waniliowy JS, prawdopodobnie ze względu na popularność w jQuery. Obecnie jest dostępny w Chrome, FF i Opera. Transpilery powinny sobie z tym poradzić, dopóki nie stanie się wszędzie dostępny.

PS Ciągi można dodawać bezpośrednio na początku

parentElement.prepend('This text!');

Linki: developer.mozilla.org - Polyfill

Wymagane tutaj

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

dodane przez

$(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>");