İlk çocuk olarak eleman nasıl eklenir?

Bir düğmenin her tıklamasında jquery kullanarak ilk öğe olarak bir div eklemek istiyorum

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

$.prepend()İşlevi deneyin .

Kullanım

$("#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" />

@Vabhatia'nın söylediğine göre, yerel JavaScript'te (JQuery olmadan) istediğiniz şey budur.

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

Kullanın: $("<p>Test</p>").prependTo(".inner"); Çıkış jquery.com üzerinde .prepend belgelerine

parentNode.insertBefore(newChild, refChild)

NewChild düğümünü, refChild varolan alt düğümünden önce parentNode alt öğesi olarak ekler. (NewChild döndürür.)

RefChild null ise, newChild alt listenin sonuna eklenir. Eşit ve daha okunaklı bir şekilde parentNode.appendChild (newChild) kullanın.

parentElement.prepend(newFirstChild);

Bu, (muhtemelen) ES7'de yeni bir eklentidir. Şimdi, muhtemelen jQuery'deki popülerliğinden dolayı vanilya JS'dir. Şu anda Chrome, FF ve Opera'da mevcuttur. Transpilers, her yerde mevcut olana kadar onu kullanabilmelidir.

PS Dizelerin başına doğrudan ekleyebilirsiniz

parentElement.prepend('This text!');

Bağlantılar: developer.mozilla.org - Polyfill

Burada gerekli

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

tarafından eklendi

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