new document

// 創(chuàng)建一個ul

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

ul.id = "oList";

// 創(chuàng)建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);

}

// 當(dāng)用戶點(diǎn)擊某一個li的時候，做一下標(biāo)記，記住選中

function select(li)

{

// 先清除所有l(wèi)i的選中狀態(tài)

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

{

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

}

// 設(shè)置用戶點(diǎn)擊li的選中狀態(tài)

li.style.listStyleType="circle";

}

function createItem(txt1, txt2)

{

// 創(chuàng)建一個li

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

// 創(chuàng)建2個span，用于放置text

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

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

// 設(shè)置text

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

inputresolution.innerText = txt2;

// 設(shè)置li的style屬性

li.style.listStyleType="none";

// 添加span控件到li

li.appendChild(inputname);

li.appendChild(inputresolution);

// 注冊li的onclick事件

li.onclick = function ()

{

select(this);

}

// li已經(jīng)裝配完畢，返回給ul，用于添加

return li;

}

// 創(chuàng)建指定數(shù)量的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 ;

}

}

}

總結(jié)

以上是生活随笔為你收集整理的html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。