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   lt div id  parent-div  gt       lt  --insert element as a first child here    -- gt        lt div class  child-div  gt some text lt  div gt       lt div class  child-div  gt some text lt  div gt       lt div class  child-div  gt some text lt  div gt    lt  div gt

User · Accepted Answer

Try the   prepend   function   Usage      parent-div   prepend   lt div class  child-div  gt some text lt  div gt       Demo   x000D   x000D  var i   0  x000D    document  ready function      x000D          add   on  click   function  event    x000D          var html     lt div class  child-div  gt some text     i       lt  div gt    x000D              parent-div   prepend html   x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  parent-div  gt  x000D       lt div gt Hello World lt  div gt  x000D   lt  div gt  x000D   lt input type  button  value  add  class  add    gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Required here   lt div class  outer  gt Outer Text         lt div class  inner  gt  Inner Text lt  div gt    lt  div gt   added by     document  ready function            inner   prepend   lt div class  middle  gt New Text Middle lt  div gt

User · Answer

Extending on what  vabhatia said  this is what you want in native JavaScript  without JQuery    ParentNode insertBefore  lt your element gt   ParentNode firstChild

User · Answer

parent-div   children   first   before   lt div class  child-div  gt some text lt  div gt

User · Answer

Use      lt p gt Test lt  p gt    prependTo   inner    Check out the  prepend documentation on jquery com

User · Answer

child-div div first   before  Your div code or some text

[jquery] How to insert element as a first child?

Usage

Demo

Examples related to jquery

Examples related to prepend

Examples related to css-selectors