it-swarm.com.de

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

Ich möchte ein div als erstes Element hinzufügen, indem Sie bei jedem Klicken einer Schaltfläche jquery verwenden

<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> 
79
Rana Imtiaz

Versuchen Sie die Funktion $.prepend() .

Verwendungszweck

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

133
Mohamed Nuur

In Ergänzung zu @vabhatia möchten Sie dies in nativem JavaScript (ohne JQuery) tun.

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

10
dtsn

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

7
WizxX20
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 am Ende der Liste der untergeordneten Elemente newChild hinzugefügt. Entsprechender und verständlicher verwenden Sie parentNode.appendChild (newChild).

5
Varun Bhatia
parentElement.prepend(newFirstChild);

Dies ist ein neuer Zusatz 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 damit umgehen können, bis sie überall verfügbar sind.

P.S. Sie können Strings direkt voranstellen 

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill

1
Gibolt
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
0
Sayed

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

0
Chintan7027