js简单实现交换Li的值


Posted in Javascript onMay 22, 2014

交接li的值.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>交换Li的值</title> 
<script type="text/javascript"> 
window.onload= function() { 
var lis = document.getElementById("ulList").childNodes; for (var i = 0; i < lis.length; i++) { 
var myli = lis[i]; 
//判断是否是标签 
if (myli.nodeType == 1) { 
//和下面的一个li交换位置 
myli.onclick = function() { 
if (this.nextElementSibling) { 
var nextli = this.nextElementSibling;//这里只能用this,不能用myli 
document.getElementById("ulList").insertBefore(nextli, this); 
} 
}; 
} 
} 
} 
</script> 
</head> 
<body> 
<ul id="ulList"> 
<li>北京</li> 
<li>山西</li> 
<li>上海</li> 
<li>天津</li> 
<li>河南</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
js操作iframe父子窗体示例
May 22 #Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 #Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 #Javascript
jQuery异步验证用户名是否存在示例代码
May 21 #Javascript
jQuery取id有.的值的方法
May 21 #Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 #Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
微信小程序switch组件使用详解
2018/01/31 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
如何用python整理附件
2018/05/13 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
汇科协同Java笔试题
2012/03/31 面试题
护理自荐信范文
2013/10/05 职场文书
往来会计岗位职责
2013/12/19 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
广告业务员岗位职责
2015/02/13 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
升学宴祝酒词
2015/08/11 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫