119

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>
dab0bby
  • 2,951
  • 1
  • 31
  • 35
Rana Imtiaz
  • 1,363
  • 3
  • 12
  • 18

8 Answers8

191

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" />
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Mohamed Nuur
  • 5,536
  • 6
  • 39
  • 55
  • 1
    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. – Aurovrata Nov 07 '18 at 03:36
  • 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. – Roland Jun 14 '19 at 15:45
24

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

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

dtsn
  • 1,077
  • 1
  • 10
  • 17
7

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

WizxX20
  • 311
  • 2
  • 6
6
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).

Varun Bhatia
  • 4,326
  • 32
  • 46
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

Gibolt
  • 42,564
  • 15
  • 187
  • 127
0
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");
Sayed
  • 601
  • 6
  • 21
  • this will insert [before](https://api.jquery.com/before/) each child, ie you will end up inserting multiple nodes. – Aurovrata Nov 07 '18 at 03:29
0

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

Chintan7027
  • 7,115
  • 8
  • 36
  • 50
-1

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

THAS
  • 9
  • 2