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

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

7

Uso: $("<p>Test</p>").prependTo(".inner"); verifique a documentação .prepend em jquery.com

— WizxX20
fonte

isso irá inserir vários nós, um antes de cada filho.

— Aurovrata

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