¿Cómo insertar un elemento como primer hijo?

96

Quiero agregar un div como primer elemento usando jquery en cada clic de un botón

<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
fuente

Las respuestas a esta pregunta también funcionan con una lista vacía de elementos child-div. ¡Excelente!

— Roland

163

Prueba la $.prepend()función.

Uso

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

Manifestación

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 fragmento

— Mohamed Nuur
fuente

el problema con esta solución es que se inserta como el primer hijo y no antes de la lista de hijos, si el contenedor principal contiene diferentes elementos secundarios y uno quiere insertar antes de un grupo específico de nodos secundarios, esto no funcionará.

— Aurovrata

Al principio, no me pareció evidente que esta solución también funciona si no hay elementos secundarios-div. prepend () se insertará en la lista vacía y creará el primer elemento div hijo. Por supuesto, append () también funciona, pero la lista se crea en otro orden.

— Roland

17

Ampliando lo que dijo @vabhatia, esto es lo que desea en JavaScript nativo (sin JQuery).

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

— dtsn
fuente

7

Uso: $("<p>Test</p>").prependTo(".inner"); Salida de la documentación .prepend en jquery.com

— WizxX20
fuente

esto insertará varios nodos, uno antes de cada hijo.

— Aurovrata

5

parentNode.insertBefore(newChild, refChild)

Inserta el nodo newChild como hijo de parentNode antes del nodo hijo existente refChild. (Devuelve newChild.)

Si refChild es nulo, newChild se agrega al final de la lista de hijos. De manera equivalente y más legible, use parentNode.appendChild (newChild).

— Varun Bhatia
fuente

literalmente copiar y pegar de otra publicación. ¿Quizás hacer referencia a la pregunta específica y cómo se relaciona?

— roberthuttinger

1

parentElement.prepend(newFirstChild);

Esta es una nueva adición en (probablemente) ES7. Ahora es Vanilla JS, probablemente debido a la popularidad en jQuery. Actualmente está disponible en Chrome, FF y Opera. Los transpiladores deberían poder manejarlo hasta que esté disponible en todas partes.

PD: puede anteponer directamente cadenas

parentElement.prepend('This text!');

Enlaces: developer.mozilla.org - Polyfill

— Gibolt
fuente

0

Requerido aquí

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

añadido por

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

— Chintan7027
fuente

-1

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

— THAS
fuente

no hay nodos secundarios debajo de child-div

— Aurovrata

-1

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

— Sayed
fuente

esto se insertará antes de cada hijo, es decir, terminará insertando varios nodos.

— Aurovrata