Como inserir um elemento como primeiro filho?

96

Quero adicionar um div como primeiro elemento usando jquery a cada clique de um botão

<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
fonte
As respostas a essa pergunta também funcionam com uma lista vazia de elementos div-filhos. Ótimo!
Roland

Respostas:

162

Experimente a $.prepend()função.

Uso

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

Mohamed Nuur
fonte
o problema com esta solução é que ela insere como o primeiro filho e não antes dos filhos da lista, se o container pai contiver diferentes elementos filhos e alguém quiser inserir antes de um grupo específico de nós filhos, isso não funcionará.
Aurovrata
A princípio, não estava claro para mim que essa solução também funcionasse se não houvesse nenhum elemento div filho. prepend () será inserido na lista vazia e criará o primeiro elemento div-filho. Obviamente, append () também funciona, mas a lista é criada em outra ordem.
Roland de
17

Ampliando o que @vabhatia disse, isso é o que você quer em JavaScript nativo (sem JQuery).

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

dtsn
fonte
5 
parentNode.insertBefore(newChild, refChild)

Insere o nó newChild como filho de parentNode antes do nó filho existente refChild. (Retorna newChild.)

Se refChild for nulo, newChild será adicionado ao final da lista de filhos. De forma equivalente e mais legível, use parentNode.appendChild (newChild).

Varun Bhatia
fonte
literalmente copie e cole de outro post. talvez dê referência à questão específica e como ela se relaciona?
roberthuttinger
1 
parentElement.prepend(newFirstChild);

Esta é uma nova adição no (provável) ES7. Agora é JS baunilha, provavelmente devido à popularidade em jQuery. Atualmente está disponível no Chrome, FF e Opera. Transpiladores devem ser capazes de lidar com isso até que esteja disponível em todos os lugares.

PS Você pode preceder strings diretamente 

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill

Gibolt
fonte
0

Requerido aqui

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

adicionado por

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

Chintan7027
fonte
-1

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

ESSA
fonte
não há nós filhos abaixo do div filho
Aurovrata
-1 
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
Sayed
fonte
isso será inserido antes de cada filho, ou seja, você acabará inserindo vários nós.
Aurovrata