How to insert an element as the first child?

Question

I want to add a div as the first element using jquery every time I click 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> 

Answer 1

Try the $.prepend() function.

Using

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

Answer 2

Usage: $("<p>Test</p>").prependTo(".inner"); Check out . Prepare documentation at jquery.com

Answer 3

 parentNode.insertBefore(newChild, refChild) 

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

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

Answer 4

Continuing with what @vabhatia said, this is what you want in native JavaScript (without jQuery).

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

Answer 5

 parentElement.prepend(newFirstChild); 

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

PS You can directly add lines

 parentElement.prepend('This text!'); 

Links: developer.mozilla.org - Polyfill

Answer 6

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

Answer 7

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

Answer 8

Required here

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

added

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