How to insert element as a first child?
JqueryPrependCss SelectorsJquery Problem Overview
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>
Jquery Solutions
Solution 1 - Jquery
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" />
Solution 2 - Jquery
Extending on what @vabhatia said, this is what you want in native JavaScript (without JQuery).
ParentNode.insertBefore(<your element>, ParentNode.firstChild);
Solution 3 - Jquery
Use: $("<p>Test</p>").prependTo(".inner");
Check out the .prepend documentation on jquery.com
Solution 4 - Jquery
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).
Solution 5 - Jquery
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
Solution 6 - Jquery
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>'); });
Solution 7 - Jquery
$(".child-div div:first").before("Your div code or some text");
Solution 8 - Jquery
$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");