How to set DOM element as the first child

Question

I have element E and I m appending some elements to it  All of a sudden  I find out that the next element should be the first child of E  What s the trick  how to do it  Method unshift doesn t work because E is an object  not array    Long way would be to iterate trough E s children and to move em key    but I m sure that there is a prettier way

User · Answer

var newItem   document createElement  LI             Create a  lt li gt  node var textnode   document createTextNode  Water        Create a text node newItem appendChild textnode                         Append the text to  lt li gt   var list   document getElementById  myList          Get the  lt ul gt  element to insert a new node list insertBefore newItem  list childNodes 0        Insert  lt li gt  before the first child of  lt ul gt    https   www w3schools com jsref met node insertbefore asp

User · Answer

var eElement     some E DOM instance var newFirstElement    element which should be first in E  eElement insertBefore newFirstElement  eElement firstChild

User · Answer

2018 version - prepend parent prepend newChild       newChild  child1  child2   This is modern JS  It is more readable than previous options  It is currently available in Chrome  FF  and Opera  The equivalent for adding to the end is append  replacing the old appendChild parent append newChild       child1  child2  newChild   Advanced usage  You can pass multiple values  or use spread operator       Any string value will be added as a text element   Examples  parent prepend newChild   quot foo quot         newChild   quot foo quot   child1  child2   const list     quot bar quot   newChild  parent append    list   quot fizz quot          child1  child2   quot bar quot   newChild   quot fizz quot    Related DOM methods  Read More - child before and child after Read More - child replaceWith  Mozilla Documentation Can I Use

User · Answer

2017 version  You can use   targetElement insertAdjacentElement  afterbegin   newFirstElement    From MDN       The insertAdjacentElement   method inserts a given element node at a given position relative to the element it is invoked upon       position     A DOMString representing the position relative to the element  must be one of the following strings    beforebegin  Before the element itself    afterbegin  Just inside the element  before its first child    beforeend  Just inside the element  after its last child    afterend  After the element itself         element   The element to be inserted into the tree    Also in the family of insertAdjacent there is the sibling methods       element insertAdjacentHTML  afterbegin   htmlText   for inject html string directly  like innerHTML but without overide everything   so you can jump oppressive process of document createElement and even build whole componet with string manipulation process  element insertAdjacentText for inject sanitize string into element   no more encode decode

User · Answer

You can implement it directly i all your window html elements  Like this   HTMLElement prototype appendFirst   function childNode        if  this firstChild            this insertBefore childNode  this firstChild             else           this appendChild childNode

User · Answer

I created this prototype to prepend elements to parent element   Node prototype prependChild   function  child  Node        this insertBefore child  this firstChild       return this

User · Answer

Unless I have misunderstood      e   prepend   lt yourelem gt Text lt  yourelem gt       Or      lt yourelem gt Text lt  yourelem gt    prependTo  e      Although it sounds like from your description that there is some condition attached  so  if  SomeCondition          e   prepend   lt yourelem gt Text lt  yourelem gt       else         e   append   lt yourelem gt Text lt  yourelem gt

User · Answer

I think you re looking for the  prepend function in jQuery  Example code       E   prepend   lt p gt Code goes here  yo  lt  p gt

User · Answer

Accepted answer refactored into a function   function prependChild parentEle  newFirstChildEle        parentEle insertBefore newFirstChildEle  parentEle firstChild

[javascript] How to set DOM element as the first child?

Examples related to javascript

Examples related to jquery

Examples related to arrays

Examples related to dom

Examples related to elements