Move an element one place up or down in the dom tree with javascript

Question

I want a javascript way to move an element one place up or down in the dom tree within a particular known parent using javascript (or jquery is ok), but i want the script to know when an element is the first or last element within the parent and not be moved. for example, if i have the following ...

<div id='parent_div'>     <div id='div_1'></div>     <div id='div_2'></div>     <div id='div_3'></div> </div> 

on click of a button, i want to pass a known id (let's say div_2) and move it up to the position above it, swapping its position with the element that was previously before it (in this case div_1). The ids of the elements don't have to change, and their new position doesn't need to be known, at least not unless they are moved again.

Answer 1

With jQuery:

var e = $("#div_2"); // move up: e.prev().insertAfter(e); // move down: e.next().insertBefore(e); 

Answer 2

Move element "up":

if(element.previousElementSibling)   element.parentNode.insertBefore(element, element.previousElementSibling); 

Move element "down":

if(element.nextElementSibling)   element.parentNode.insertBefore(element.nextElementSibling, element); 

function moveUp(element) {    if(element.previousElementSibling)      element.parentNode.insertBefore(element, element.previousElementSibling);  }  function moveDown(element) {    if(element.nextElementSibling)      element.parentNode.insertBefore(element.nextElementSibling, element);  }  document.querySelector('ul').addEventListener('click', function(e) {    if(e.target.className === 'down') moveDown(e.target.parentNode);    else if(e.target.className === 'up') moveUp(e.target.parentNode);  });

.up, .down        { cursor: pointer; }  .up:after         { content: '△'; }  .up:hover:after   { content: '▲'; }  .down:after       { content: '▽'; }  .down:hover:after { content: '▼'; }

<ul>    <li>1<span class="up"></span><span class="down"></span></li>    <li>2<span class="up"></span><span class="down"></span></li>    <li>3<span class="up"></span><span class="down"></span></li>    <li>4<span class="up"></span><span class="down"></span></li>    <li>5<span class="up"></span><span class="down"></span></li>  </ul>