jquery - div - ¿Cómo insertar el elemento como primer hijo?

jquery before selector

Question

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> 

Answer 1

Extendiéndose sobre lo que dijo @vabhatia, esto es lo que quiere en JavaScript nativo (sin JQuery).

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

Answer 2

Pruebe la función $.prepend() .

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

Answer 3

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>''); });

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

parentElement.prepend(newFirstChild);

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

PD: puede anteponer cadenas directamente

parentElement.prepend(''This text!'');

Enlaces: developer.mozilla.org - Polyfill

Answer 8

parentNode.insertBefore(newChild, refChild)

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

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