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 kno

Answer 1

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: '▼'; }

  
1
  
2
  
3
  
4
  
5