Jak wstawić element jako pierwsze dziecko?

96

Chcę dodać element div jako pierwszy element za pomocą jquery przy każdym kliknięciu przycisku

<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> 
Rana Imtiaz
źródło
Odpowiedzi na to pytanie działają również z pustą listą elementów potomnych div. Wspaniały!
Roland,

Odpowiedzi:

164

Spróbuj $.prepend() funkcję.

Stosowanie

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

Próbny

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

Mohamed Nuur
źródło
Problem z tym rozwiązaniem polega na tym, że wstawia je jako pierwsze dziecko, a nie przed listą dzieci, jeśli kontener nadrzędny zawiera różne elementy podrzędne i chce się wstawić przed określoną grupą węzłów potomnych, to nie zadziała.
Aurovrata
Na początku nie było dla mnie oczywiste, że to rozwiązanie działa również, jeśli nie ma żadnych elementów potomnych div. prepend () wstawi do pustej listy i utworzy pierwszy element potomny div. Oczywiście append () również działa, ale lista jest tworzona w innej kolejności.
Roland,
18

Rozszerzając to, co powiedział @vabhatia, tego chcesz w natywnym JavaScript (bez JQuery).

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

dtsn
źródło
5
parentNode.insertBefore(newChild, refChild)

Wstawia węzeł newChild jako element podrzędny parentNode przed istniejącym węzłem podrzędnym refChild. (Zwraca newChild.)

Jeśli refChild ma wartość null, nowyChild jest dodawany na końcu listy dzieci. Równoważnie i czytelniej użyj parentNode.appendChild (newChild).

Varun Bhatia
źródło
dosłownie skopiuj i wklej z innego postu. być może podać odniesienie do konkretnego pytania i jego związku?
roberthuttinger
1
parentElement.prepend(newFirstChild);

Jest to nowy dodatek w (prawdopodobnie) ES7. Jest to teraz waniliowy JS, prawdopodobnie ze względu na popularność w jQuery. Obecnie jest dostępny w Chrome, FF i Opera. Transpilery powinny sobie z tym poradzić, dopóki nie stanie się wszędzie dostępny.

PS Ciągi można dodawać bezpośrednio na początku

parentElement.prepend('This text!');

Linki: developer.mozilla.org - Polyfill

Gibolt
źródło
0

Wymagane tutaj

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

dodane przez

$(document).ready(function(){ $('.inner').prepend('<div class="middle">New Text Middle</div>'); });

Chintan7027
źródło
-1

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

TAK
źródło
nie ma węzłów podrzędnych poniżej child-div
Aurovrata
-1
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
Powiedział
źródło
to wstawi przed każdym dzieckiem, tj. skończysz wstawiając wiele węzłów.
Aurovrata