Làm thế nào để chèn phần tử như một phần tử con đầu tiên?

Tôi muốn thêm div làm phần tử đầu tiên bằng cách sử dụng jquery trên mỗi lần nhấp vào nút

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

Hãy thử $.prepend()chức năng.

Sử dụng

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

Bản giới thiệu

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

Mở rộng những gì @vabhatia đã nói, đây là những gì bạn muốn trong JavaScript gốc (không có JQuery).

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

Sử dụng: $("<p>Test</p>").prependTo(".inner"); Xem tài liệu .prepend trên jquery.com

parentNode.insertBefore(newChild, refChild)

Chèn nút newChild dưới dạng con của parentNode trước refChild của nút con hiện có. (Trả về newChild.)

Nếu refChild là null, newChild sẽ được thêm vào cuối danh sách con. Tương tự, và dễ đọc hơn, hãy sử dụng parentNode.appendChild (newChild).

parentElement.prepend(newFirstChild);

Đây là một bổ sung mới trong (có thể) ES7. Bây giờ nó là vanilla JS, có lẽ là do sự phổ biến trong jQuery. Nó hiện có sẵn trong Chrome, FF và Opera. Transpilers sẽ có thể xử lý nó cho đến khi nó có sẵn ở khắp mọi nơi.

PS Bạn có thể thêm trực tiếp các chuỗi

parentElement.prepend('This text!');

Liên kết: developer.mozilla.org - Polyfill

Bắt buộc ở đây

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

thêm bởi

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