appendChild   1.先把元素从原有的父级上删除    2.添加到新的父级

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oUl=document.getElementById('ul1');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        var aLi=oUl.getElementsByTagName('li');

        var arr=[];

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

        {

            arr[i]=aLi[i];

        }

        arr.sort(function(li1,li2){

                          var n1=parseInt(li1.innerHTML);

                          var n2=parseInt(li2.innerHTML);

                          return n1-n2;

                          });

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

        {

            oUl.appendChild(arr[i]);

        }

    }

}

</script>

</head>

<body>

<input id="btn1" type="button" value="排序"/>

<ul id="ul1">

   <li>23</li>

   <li>9</li>

   <li>99</li>

   <li>82</li>

   <li>34</li>

</ul>

</body>

排序后：

例二

<title>无标题文档</title>

<style>

#ul1{background:green;}

#ul2{background:yellow;}

</style>

<script>

window.onload=function ()

{

    var oBtn=document.getElementById('btn1');

    var oUl1=document.getElementById('ul1');

    var oUl2=document.getElementById('ul2');

    oBtn.onclick=function ()

    {

        var oLi=oUl1.children[0];

        oUl2.appendChild(oLi);

    }

}

</script>

</head>

<body>

<ul id="ul1">

   <li>1</li>

   <li>2</li>

   <li>3</li>

   <li>4</li>

</ul>

<input id="btn1" type="button" value="移动"/>

<ul id="ul2">

</ul>

</body>

表格排序

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        var arr=[];

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

        {

            arr[i]=oTab.tBodies[0].rows[i];

        }

        arr.sort(function(tr1,tr2){

                          var n1=parseInt(tr1.cells[0].innerHTML);

                          var n2=parseInt(tr2.cells[0].innerHTML);

                          return n1-n2;

                          });

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

        {

            oTab.tBodies[0].appendChild(arr[i]);

        }

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="排序"/>

<table id="tab1" border="1" width="500">

    <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

       <td>操作</td>

    </thead>

    <tbody>

       <tr>

        <td>2</td>

        <td>张三</td>

        <td>24</td>

        <td></td>

       </tr>

       <tr>

        <td>1</td>

        <td>blue</td>

        <td>23</td>

        <td></td>

       </tr>

       <tr>

        <td>5</td>

        <td>李六</td>

        <td>27</td>

        <td></td>

       </tr>

       <tr>

        <td>4</td>

        <td>王五</td>

        <td>26</td>

        <td></td>

       </tr>

       <tr>

        <td>3</td>

        <td>李四</td>

        <td>25</td>

        <td></td>

       </tr>

    </tbody>

</table>

</body>

排序后：

JS-DOM操作应用高级（三）的更多相关文章

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. JS DOM操作

    一.DOM基础 1.节点(node)层次 Document--最顶层的节点,所有的其他节点都是附属于它的. DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现 ...

  5. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  6. JS DOM操作（三） Window.docunment对象——操作属性

    属性:是对象的性质与对象之间关系的统称.HTML中标签可以拥有属性,属性为 HTML 元素提供附加信. 属性总是以名称/值对的形式出现,比如:name="value". 属性值始终 ...

  7. 第七节 DOM操作应用-高级

    表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...

  8. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  9. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  10. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

随机推荐

  1. SqlServer 汉字转换拼音首字母函数

    CREATE function [dbo].[Func_GetPY](@str nvarchar(4000))returns nvarchar(4000)asbegin set @str=RTRIM( ...

  2. Xcode中AutoLayOut的简单使用

    做了一段界面最头疼的就是适配的问题了,使用AutoLayOut做适配是一个不错的选择, 自己做的一个小例子,具体如下: 一.在新建的xib文件中勾选上 autoLayout,默认是勾选上的 二.在xi ...

  3. zabbix 监控mysql主从

    这里记录了,每次都百度查询多次. zabbix默认包含mysql监控 其中包含 mysql的基本状态监控 MySQL主从监控需要结合自定义 1)目前项目需求 只对 Slave_IO_Running . ...

  4. Html复杂表头的实现

    实现效果 代码实现

  5. Cenots安装openvpn、pam_mysql进行用户认证和流量控制

    一.安装Centos6.5 二.修改YUM仓库 1. 默认仓库不能访问部分软件包,因此我们需要修改YUM仓库 cd /etc/yum.repos.d #备份 mv ./CentOS-Base.repo ...

  6. log4j配置详解[http://www.iteye.com/topic/378077]

    log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档,推荐使用1.2.X版,下载地址: http://logging.apache. ...

  7. Android PagerAdapter的用法

    转http://blog.csdn.net/look85/article/details/8563906 在写这个之前,真心需要吐槽一下…关于Android开发中,PageAdapter的用法在网上能 ...

  8. javaweb学习总结——Filter高级开发

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  9. apk的重签名

    1.      生成Android APK包签名证书 1).     在doc中切换到jdk的bin目录 cd C:\Program Files\Java\jdk1.6.0_18\bin 2).    ...

  10. echo json数据给ajax后, 需要加上exit,防止往下执行,带上其他数据,到时ajax失败

    01返回json数据给ajax后需要加上exit.返回json数据前不能有其他输出 function apply(){ if(IS_POST){$info['status'] = 1; echo js ...