html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.

new document

// 创建一个ul

var ul = document.createElement("ul");

ul.id = "oList";

// 创建div

var div = document.getElementById('mergeCase');

// 把ul放置到div中

div.appendChild(ul);

// 遍历所有的li条目

function trace()

{

var strTest = "";

for (var i = 0; i < ul.childNodes.length; i ++)

{

strTest += ul.childNodes[i].childNodes[1].innerText;

}

alert(strTest);

}

// 当用户点击某一个li的时候，做一下标记，记住选中

function select(li)

{

// 先清除所有li的选中状态

for (var i = 0; i < ul.childNodes.length; i ++)

{

ul.childNodes[i].style.listStyleType="none";

}

// 设置用户点击li的选中状态

li.style.listStyleType="circle";

}

function createItem(txt1, txt2)

{

// 创建一个li

var li = document.createElement("li");

// 创建2个span，用于放置text

var inputname = document.createElement("span");

var inputresolution = document.createElement("span");

// 设置text

inputname.innerText = "(-) " + txt1;

inputresolution.innerText = txt2;

// 设置li的style属性

li.style.listStyleType="none";

// 添加span控件到li

li.appendChild(inputname);

li.appendChild(inputresolution);

// 注册li的onclick事件

li.onclick = function ()

{

select(this);

}

// li已经装配完毕，返回给ul，用于添加

return li;

}

// 创建指定数量的li

function mergeCase(count){

for( var i = 0; i

var li = createItem("VideoName:" + (Math.round(Math.random()*1000)) + " "

, "VideoId:" + (i) + "");

ul.appendChild(li);

}

}

// 向上移动

function downSwap(){

var s = document.getElementById("oList");

var w = s.childNodes.length;

for (var i = 0;i < w; i++ ){

if (s.children(i).style.listStyleType == "circle" && s.children(i).nextSibling != null)

{

// Ie下面有效的api，ff和chrome不确定是否支持

s.children(i).swapNode(s.children(i).nextSibling);

return ;

}

}

}

// 向下移动

function upSwap(){

var s = document.getElementById("oList");

var w = s.childNodes.length;

for (var i = 0;i < w; i++ ){

if (s.children(i).style.listStyleType == "circle" && s.children(i).previousSibling != null)

{

s.children(i).swapNode(s.children(i).previousSibling);

return ;

}

}

}

// 删除一个li条目

function del(){

var s = document.getElementById('oList');

var w = s.childNodes.length;

for (var i = 0;i < w; i++ ){

if (s.children(i).style.listStyleType == "circle")

{

s.removeChild(s.childNodes[i]);

return ;

}

}

}