Javascript DOM List Swap Nodes Example
I couldn’t find an easy to follow example to do this anywhere on the web so I did my own up. Basically I wanted a list where each item has an up and a down button that will dynamically reorder the list. I tried swapping the nodes themselves but it didn’t work so it seems that I have to use the removeChild and insertBefore methods to actually see the results on the page.
Here is the Javascript DOM Example
<ul id='list' name='list'>
</ul>
<script type='text/javascript'>
//swap the current li node with the one above it
function up(button_node)
{
var current_node = button_node.parentNode;
var list_children = document.getElementById('list').childNodes;
var list_node = document.getElementById('list');
var temp_node;
var previous_node;
for(var i=0;i<list_children.length;i++)
{
if(current_node.id == list_children[i].id && previous_node)
{
temp_node = list_children[i].cloneNode(true);
list_node.removeChild(list_children[i]);
list_node.insertBefore(temp_node,previous_node);
}
if(list_children[i].tagName=='LI')
previous_node=list_children[i];
}
}
//swap the chosen li node with the one below it
function down(button_node)
{
var current_node = button_node.parentNode;
var list_children = document.getElementById('list').childNodes;
var list_node = document.getElementById('list');
var temp_node;
var previous_node = "";
for(var i=0;i<list_children.length;i++)
{
if(current_node.id == list_children[i].id)
{
previous_node=list_children[i];
}
else if(previous_node && list_children[i].tagName=='LI')
{
temp_node = list_children[i].cloneNode(true);
list_node.removeChild(list_children[i]);
list_node.insertBefore(temp_node,previous_node);
previous_node = "";
}
}
}
//create the li elements
function create_list()
{
for(var i=0;i<6;i++)
{
add_li('list', "Item "+i," Item "+(i+1)+" \
<input type='button' id='up_button1' value='Up' onclick='up(this);'>\
<input type='button' id='down_button1' value='Down' onclick='down(this);'>");
}
}
//add a li element
function add_li(list, id, text) {
var list = document.getElementById(list);
var li = document.createElement("li");
li.innerHTML = text;
li.id=id;
list.appendChild(li);
}
create_list();
</script>
So it is a little longer than I expected but it works and it’s pretty easy to understand.