Wie füge ich als erstes Kind ein Element ein?

Ich möchte bei jedem Klick auf eine Schaltfläche mit jquery ein div als erstes Element hinzufügen

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

Probieren Sie die $.prepend()Funktion aus.

Verwendung

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

In Anbetracht dessen, was @vabhatia gesagt hat, ist dies das, was Sie in nativem JavaScript (ohne JQuery) wollen.

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

Verwendung: Lesen$("<p>Test</p>").prependTo(".inner"); Sie die .prepend-Dokumentation auf jquery.com

parentNode.insertBefore(newChild, refChild)

Fügt den Knoten newChild als untergeordnetes Element von parentNode vor dem vorhandenen untergeordneten Knoten refChild ein. (Gibt newChild zurück.)

Wenn refChild null ist, wird newChild am Ende der Liste der untergeordneten Elemente hinzugefügt. Verwenden Sie gleichwertig und besser lesbar parentNode.appendChild (newChild).

parentElement.prepend(newFirstChild);

Dies ist eine neue Ergänzung in (wahrscheinlich) ES7. Es ist jetzt Vanilla JS, wahrscheinlich aufgrund der Popularität in jQuery. Es ist derzeit in Chrome, FF und Opera verfügbar. Transpiler sollten in der Lage sein, damit umzugehen, bis es überall verfügbar ist.

PS Sie können Zeichenfolgen direkt voranstellen

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill

Hier erforderlich

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

hinzugefügt von

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