JavaScript moving element in the DOM

Question

Let s say I have three  lt div gt  elements on a page  How can I swap positions of the first and third  lt div gt   jQuery is fine

User · Answer

before and  after Use modern vanilla JS  Way better cleaner than previously  No need to reference a parent  const div1   document getElementById  quot div1 quot    const div2   document getElementById  quot div2 quot    const div3   document getElementById  quot div3 quot     div2 after div1   div2 before div3    Browser Support - 95  Global as of Oct  20

User · Answer

Trivial with jQuery      div1   insertAfter   div3        div3   insertBefore   div2      If you want to do it repeatedly  you ll need to use different selectors since the divs will retain their ids as they are moved around     function         setInterval  function                div first   insertAfter    div   eq 2               div   eq 1  insertBefore  div first           3000

User · Answer

Sorry for bumping this thread I stumbled over the  swap DOM-elements  problem and played around a bit  The result is a jQuery-native  solution  which seems to be really pretty  unfortunately i don t know whats happening at the jQuery internals when doing this   The Code       element1   insertAfter     element2       The jQuery documentation says that insertAfter   moves the element and doesn t clone it

User · Answer

Jquery approach mentioned on the top will work  You can also use JQuery and CSS  Say for e g on Div one you have applied class1 and div2 you have applied class class2  say for e g each class of css provides specific position on the browser   now you can interchange the classes use jquery or javascript  that will change the position

User · Answer

var swap   function          var divs   document getElementsByTagName  div        var div1   divs 0       var div2   divs 1       var div3   divs 2        div3 parentNode insertBefore div1  div3       div1 parentNode insertBefore div3  div2        This function may seem strange  but it heavily relies on standards in order to function properly  In fact  it may seem to function better than the jQuery version that tvanfosson posted which seems to do the swap only twice   What standards peculiarities does it rely on      insertBefore       Inserts the node newChild before the existing child node refChild  If   refChild is null  insert newChild at   the end of the list of children        If newChild is a DocumentFragment object  all of its children are   inserted  in the same order  before   refChild  If the newChild is already   in the tree  it is first removed

User · Answer

There s no need to use a library for such a trivial task   var divs   document getElementsByTagName  div         order  first  second  third divs 2  parentNode insertBefore divs 2   divs 0       order  third  first  second divs 2  parentNode insertBefore divs 2   divs 1       order  third  second  first   This takes account of the fact that getElementsByTagName returns a live NodeList that is automatically updated to reflect the order of the elements in the DOM as they are manipulated   You could also use   var divs   document getElementsByTagName  div         order  first  second  third divs 0  parentNode appendChild divs 0                 order  second  third  first divs 1  parentNode insertBefore divs 0   divs 1       order  third  second  first   and there are various other possible permutations  if you feel like experimenting   divs 0  parentNode appendChild divs 0  parentNode replaceChild divs 2   divs 0       for example  -

User · Answer

jQuery fn swap   function b        b   jQuery b  0        var a   this 0        var t   a parentNode insertBefore document createTextNode      a        b parentNode insertBefore a  b        t parentNode insertBefore b  t        t parentNode removeChild t        return this        and use it like this       div1   swap   div2      if you don t want to use jQuery you could easily adapt the function

[javascript] JavaScript moving element in the DOM

.before and .after

Examples related to javascript

Examples related to jquery

Examples related to dom