How to insert element as a first child?

Question

I want to add a div as a first element using jquery on each click of a button

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

Nissie

The answers to this question also work with an empty list of child-div elements. Great! – Upcast

Answer 1

Try the $.prepend() function.

Usage

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

Planoconcave

the problem with this solution is that it inserts as the first child and not before the list children, if the parent container contains different children elements and one wants to insert before a specific group of child nodes, this will not work. – Apodaca

At first, it was not apparent to me that this solution also works if there are zero child-div elements. prepend() will insert into the empty list and create the first child-div element. Of course, append() also works, but the list is created in another order. – Upcast

Answer 2

Extending on what @vabhatia said, this is what you want in native JavaScript (without JQuery).

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

Restraint

Answer 3

Use: $("<p>Test</p>").prependTo(".inner"); Check out the .prepend documentation on jquery.com

Missilery

this will insert multiple nodes, one before each child. – Apodaca

Answer 4

parentNode.insertBefore(newChild, refChild)

Inserts the node newChild as a child of parentNode before the existing child node refChild. (Returns newChild.)

If refChild is null, newChild is added at the end of the list of children. Equivalently, and more readably, use parentNode.appendChild(newChild).

Melt

literally copy and pasted from another post. perhaps give reference to the specific question and how it relates? – Ferree

Answer 5

parentElement.prepend(newFirstChild);

This is a new addition in (likely) ES7. It is now vanilla JS, probably due to the popularity in jQuery. It is currently available in Chrome, FF, and Opera. Transpilers should be able to handle it until it becomes available everywhere.

P.S. You can directly prepend strings

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill

Silverman

Answer 6

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

Gerund

this will insert before each child, ie you will end up inserting multiple nodes. – Apodaca

Answer 7

Required here

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

added by

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

Gambrill

Answer 8

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

Infectious

there are not children nodes below child-div – Apodaca