¿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

Respuestas:

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