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

95

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>
jquery prepend css-selectors Rana Imtiaz
quelle
Die Antworten auf diese Frage funktionieren auch mit einer leeren Liste von untergeordneten Elementen. Toll!
Roland

Antworten:

161

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" />
Erweitern Sie das Snippet

Mohamed Nuur
quelle
Das Problem bei dieser Lösung besteht darin, dass sie als erstes untergeordnetes Element und nicht vor der untergeordneten Liste eingefügt wird. Wenn der übergeordnete Container verschiedene untergeordnete Elemente enthält und vor einer bestimmten Gruppe von untergeordneten Knoten eingefügt werden soll, funktioniert dies nicht.
Aurovrata
Anfangs war mir nicht klar, dass diese Lösung auch funktioniert, wenn es keine untergeordneten Elemente gibt. prepend () wird in die leere Liste eingefügt und das erste untergeordnete div-Element erstellt. Natürlich funktioniert append () auch, aber die Liste wird in einer anderen Reihenfolge erstellt.
Roland
17

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

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

dtsn
quelle
5 
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).

Varun Bhatia
quelle
buchstäblich kopieren und aus einem anderen Beitrag einfügen. vielleicht auf die spezifische Frage verweisen und wie sie sich bezieht?
Roberthuttinger
1 
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

Gibolt
quelle
0

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>'); });

Chintan7027
quelle
-1

$(".child-div div:first").before("Your div code or some text");

THAS
quelle
Es gibt keine
Kinderknoten
-1 
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
sagte
quelle
Dies wird vor jedem Kind eingefügt, dh Sie werden am Ende mehrere Knoten einfügen.
Aurovrata