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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 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
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python打开网页和暂停实例
2014/09/30 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
费用会计岗位职责
2014/01/01 职场文书
治庸问责心得体会
2014/09/12 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
六一活动主持词
2015/06/30 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server