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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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代码优化及php相关问题总结
2006/10/09 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python中的闭包函数
2018/02/09 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
django自定义模板标签过程解析
2019/12/14 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
500行python代码实现飞机大战
2020/04/24 Python
Python collections模块的使用方法
2020/10/09 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
医学专业个人求职自荐信格式
2013/09/23 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
思想品德课教学反思
2014/02/10 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
社会公德演讲稿
2014/05/20 职场文书
医院搬迁方案
2014/06/14 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers