Bagaimana cara memasukkan elemen sebagai anak pertama?

Saya ingin menambahkan div sebagai elemen pertama menggunakan jquery pada setiap klik tombol

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

Coba $.prepend()fungsinya.

Pemakaian

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

Memperluas apa yang dikatakan @vabhatia, inilah yang Anda inginkan dalam JavaScript asli (tanpa JQuery).

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

Penggunaan: $("<p>Test</p>").prependTo(".inner"); Lihat dokumentasi .prepend di jquery.com

parentNode.insertBefore(newChild, refChild)

Menyisipkan node newChild sebagai anak dari parentNode sebelum node anak refChild yang ada. (Mengembalikan anak baru.)

Jika refChild adalah null, newChild ditambahkan di akhir daftar anak. Secara setara, dan lebih mudah dibaca, gunakan parentNode.appendChild (newChild).

parentElement.prepend(newFirstChild);

Ini adalah tambahan baru di (kemungkinan) ES7. Sekarang vanilla JS, mungkin karena popularitas di jQuery. Saat ini tersedia di Chrome, FF, dan Opera. Transpiler harus dapat menangani sampai tersedia di mana-mana.

PS Anda dapat langsung menambahkan string

parentElement.prepend('This text!');

Tautan: developer.mozilla.org - Polyfill

Diperlukan di sini

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

ditambahkan oleh

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