How I can change child elements order in JS?

Question

I have this html:

<table>
    <tr>
        <td>
            Set right order
        </td>
        <td>
            <span style = "display: block;">asd | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">dsa | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">qwe | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
            <span style = "display: block;">ewq | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span>
        </td>
    </tr>
</table>

And this JS:

function moveChoiceTo(elem_choice, direction)
{
    var curr_index = -1; //index of elem that we should move
    var td = elem_choice.parentElement.parentElement; //link to TD

    for (var i = 0; i < td.children.length; i++) //determine index of elem that called this function
        if (td.children[i].children[0] == elem_choice)
        {
            curr_index = i;
            break;
        }

    if (curr_index == -1)
        return;

    if (curr_index == 0 && direction < 0) //if nowhere to move
        return;

    if (curr_index == td.children.length - 1 && direction > 0) //if nowhere to move
        return;

    var curr_child = td.children[curr_index]; //save current elem into temp var
    td.children.splice(curr_index, 1); //here I getting exception that splice isn't supported by object, but arent this is array?
    td.children.splice(curr_index + direction, 0, curr_child); //attempt to insert it
}

I getting exception that splice isn't supported, but this supposed to be an array and support this method? What other ways I have to change children order?

I think it would be easier of you used jQuery to solve this. — silkfire
– silkfire, Commented Sep 15, 2014 at 14:34
“but this supposed to be an array” – no, it’s not – it’s an HTMLCollection — C3roe
– C3roe, Commented Sep 15, 2014 at 14:48
As CBroe said, and HTMLCollection has no method splice(), but you can use Array.splice on it: [].splice.call(td.children, curr_index, 1); — Martin Ernst
– Martin Ernst, Commented Sep 15, 2014 at 14:52

dfsq · Accepted Answer · 2014-09-15 15:06:29Z

24

I will add the answer with simpler (and better) approach:

function moveChoiceTo(elem_choice, direction) {

    var span = elem_choice.parentNode,
        td = span.parentNode;

    if (direction === -1 && span.previousElementSibling) {
        td.insertBefore(span, span.previousElementSibling);
    } else if (direction === 1 && span.nextElementSibling) {
        td.insertBefore(span, span.nextElementSibling.nextElementSibling)
    }
}

The key idea is using insertBefore method properly. You also don't need to remove anything from DOM.

Demo: http://jsfiddle.net/dq8a0ttt/

answered Sep 15, 2014 at 15:06

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kosmo零 Over a year ago

This is awesome, but I feel bad for removing accepted answer, since it also is valid. By the way, is this fine for IE6 - IE8?

dfsq Over a year ago

No problem, you don't have to :) Just make sure you use DOM methods properly in future. splice for arrays, not NodeList's.

Kosmo零 Over a year ago

Meh, I can't sleep well while this one is not the best. It's ULTIMATE best answer. Easy, small and elegant.

Aleksandar Gajic · Accepted Answer · 2014-09-15 14:44:11Z

5

Splice is not supproted in HTMLCollection, you need to use .removeChild and .insertBefore something like this:

var before = td.children[curr_index + direction];
var child = td.children[curr_index];

td.removeChild(child);
td.insertBefore(child, before); //attempt to insert it

answered Sep 15, 2014 at 14:44

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

2 Comments

Kosmo零 Over a year ago

even through your code is no correct handling for down arrow presses (because it will insert exactly in same place), it still gives the basic idea.

dfsq Over a year ago

td.removeChild(child); is not needed, since insertBefore will move element if it's already in DOM.

Atomenergy · Accepted Answer · 2022-02-08 01:46:30Z

Same as dfsq's answer but with some modifications.

var selected_element;


function moveElementTo(selected_element, direction) {

    var element_to_move = selected_element,
        td = element_to_move.parentNode;

    if (direction === -1 && element_to_move.previousElementSibling) {
        td.insertBefore(element_to_move, element_to_move.previousElementSibling);
    } else if (direction === 1 && element_to_move.nextElementSibling) {
        td.insertBefore(element_to_move, element_to_move.nextElementSibling.nextElementSibling)
    }
}



function move(dir){
    if (selected_element != undefined){
        moveElementTo(selected_element,dir);
    }else{
        console.error("No element Selected to move!");
    }

}

<div >

    <div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element One <button onclick='move(-1);'>Move_up</button></div>
    <div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element Two <button onclick='move(-1);'>Move_up</button></div>
    <div onclick='selected_element = this;'><button onclick='selected_element = this.parentNode;'> Select element </button>Element Three <button onclick='move(-1);'>Move_up</button></div>


</div>

My scenario for this was An element needs to be selected first, because I use it for a popup dialogue for which the operations show up upon long click, the Select Element button is just for demo.

Collectives™ on Stack Overflow

How I can change child elements order in JS?

3 Answers 3

Demo: http://jsfiddle.net/dq8a0ttt/

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://jsfiddle.net/dq8a0ttt/

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related