Question

I cannot seem to find what should be a basic function of JavaScript. I want to move an element up one position or down one position by a button click. jQuery and other proprietary libraries are not an option.

function moveDown()
{
    if (document.getElementById('CMSeditingNode'))
    {
        var node = document.getElementById('CMSeditingNode'),
        parent = node.parentNode,
        nextNode = node.nextSibling,
        secondNode = nextNode.nextSibling,
        oldChild = parent.removeChild(node);
        parent.insertBefore(oldChild, secondNode);
    }
}

The answer worked perfectly and I have add to this post a supplement for insertAfter().

Answer 1

The methods/properties you’re looking for are parentNode, previousSibling, nextSibling, removeChild, insertBefore, and insertAfter. A snippet might look like:

var node = document.getElementById('somenode'),
    parent = node.parentNode,
    prev = node.previousSibling,
    oldChild = parent.removeChild(node);
parent.insertBefore( oldChild, prev );

Just for comparison, the (complete) jQuery for this would be:

var $node = $('#somenode'),
            $node.prev().before($node);