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 ;

}

}

}

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

  1. 有序列表ol与无序列表ul用法

    有序列表<ol>与无序列表ul用法 其中<li> 标签定义列表项目,<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...

  2. 怎么改变html无序列表的字号,html无序列表代码 html5 无序列表的行距怎么设置

    html语句怎么实现无序列表并排?就是两列怎么实现 无序列表并排111 无序列表并排222 css: - #list li{float:left;} float浮动就行了,最好给ol和li设定固定宽度 ...

  3. python随机生成无序列表_python实现无序列表:链表

    介绍链表前我们先了解下什么是列表. 在对基本数据结构的讨论中,我们使用 Python 列表来实现所呈现的抽象数据类型.列表是一个强大但简单的收集机制,为程序员提供了各种各样的操作.然而,不是所有的编程 ...

  4. html列表黑色圆点是有序还是,网页HTML有序列表ol和无序列表ul

    html语言中有序列表和无序列表有什么区别? 第一,有序列表的标签是 ,有start属性 ,最大序号为999 无序列表的标签是,无start属性 第二,的显示方式是列表前面有序号(序号形式由type属 ...

  5. html怎么去掉无序列表符号,html无序列表怎么写?无序列表怎么去掉点?(图文)...

    在网页中,可以用很多方法来排列文本项目,可以将多种项目没有顺序地排列在一起,也可以给每个项目赋予编号后再进行排列.此时,没有顺序的文本排列方式称为无序列表. 无序列表是项目列表,列表内容可以按任意顺序 ...

  6. 表格标签(合并单元格,列表结构标签thead, tbody,有序列表ol,无序列表dl )

    表格用法: < table >< /table >是用于表格的标签. < tr >< /tr>标签用于定义表格中的行,必须嵌套在< table & ...

  7. 有序列表标签与无序列表标签

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  8. 【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全

    一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...

  9. html 无序列表黑点,Html无序列表,子弹点问题

    6 个答案: 答案 0 :(得分:1) 您需要以下内容: 然后只需添加padding:0的 .right-block ul li { list-style: none; background: url ...

最新文章

  1. Debian/Ubuntu/Raspbian 时间同步
  2. 理解一个类里边设置两个同名函数
  3. php生日计算年龄,php根据生日计算年龄的方法
  4. 恐龙快跑小程序对接流量主源码+前端 v5.0.4 全开源微擎框架
  5. python怎么执行代码漏洞_如何使用python查找网站漏洞
  6. 让软件自己写软件,机器编程未来会取代程序员吗?
  7. 《从问题到程序:用Python学编程和计算》——2.4 字符串
  8. HALCON 控制变量没有被初始化_OA大典故障案例摘录【第1397篇】理光2501如何载体初始化 ?...
  9. 如何使用NFC读写器读卡器ACR122U-A9|ACR1251U-M1|ACR1252U读写NDEF格式的智能海报|网址|文本等数据的方法与步骤
  10. MQTT、CoAP 还是 LwM2M?主流物联网协议如何选择
  11. Appium自动化测试基础--补充:C/S架构和B/S架构说明
  12. 基于ADS自带二极管的400Mhz倍频器设计
  13. 买iPhone担心买到翻新机?教你一招,轻松鉴别各个版本
  14. 华科图书情报专硕考研复试与读研
  15. 十四、Nginx--rewrite规则
  16. 【算法-枚举】淘气的青蛙 自己对解题思路的梳理
  17. XLA IR:HLO、LHLO、MHLO和LMHLO
  18. HYNB Contest 7:2017 Asia HCMC Vietnam National Programming Contest
  19. cortex-M3/cortex-M4架构
  20. 拉格朗日乘数法 对y的偏导数的推导 (有点牵强,作为理解吧)

热门文章

  1. C/C++ 指针详解
  2. 关于python语言和人工智能下哪个说法不正确_“在资源管理器”窗口中,文件夹图标左侧有“...
  3. 插入空行_如何一键插入表格空行,这个方法才最高级!
  4. python快递费用计算_[Python]简单用Python写个查询快递的程序最后附源代码
  5. kali 切换root权限_Ubuntu 被曝严重漏洞:切换系统语言 + 输入几行命令,就能获取 root 权限...
  6. FTP命令:下载,上传FTP服务器中的文件
  7. sed教程入门与实例练习(二)
  8. Ubuntu主题更换
  9. 计数排序与桶排序python实现
  10. Spring文件上传