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. MVC3+EF4.1学习系列(三)-----排序 刷选 以及分页

    上篇文章 已经做出了基本的增删改查    但这远远不足以应付实际的项目  今天讲下实际项目中 肯定会有的 排序 刷选  以及分页. 重点想多写点分页的 毕竟这个是任何时候都要有的 而且 我会尽量把这个 ...

  2. webapi中使用Route标签

    Prior to Web API 2, the Web API project templates generated code like this: protected void Applicati ...

  3. [ An Ac a Day ^_^ ] CodeForces 659D Bicycle Race 计算几何 叉积

    问有多少个点在多边形内 求一遍叉积 小于零计数就好了~ #include<stdio.h> #include<iostream> #include<algorithm&g ...

  4. 日志输出--C#

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  5. SharePoint 2013 列表启用搜索

    转载自:http://www.cnblogs.com/jianyus/p/3470117.html SharePoint 2013列表搜索的设置,只是进行完全爬网,就可以使用.如果开启爬网不是很熟练可 ...

  6. 浅谈SharePoint 2013 站点模板开发 转载自http://www.cnblogs.com/jianyus/p/3511550.html

    一直以来所接触的SharePoint开发,都是Designer配合Visual Studio,前者设计页面,后者开发功能,相互合作,完成SharePoint网站开发.直到SharePoint 2013 ...

  7. tomcat session失效时间

    conf\web.xml <session-config> <session-timeout>600</session-timeout> </session- ...

  8. U盘做svn版本控制

    svn提供的访问方式有: file:///本地路径/to/svnrepo/ //访问本地磁盘 http://host/to/svnrepo/ //通过配置subversion的apache服务器的we ...

  9. LYF模板连接.txt

    在解决方案里创建了一个新建网站,在其右键下添加一个模板后,准备使用模板的,在添加新建项里突然没有“使用模板页的web窗体”,顿时感觉悲剧... 解决方法:模板页代码---LYFMaterPage.Ma ...

  10. python 自动认证登录

    import urllib import base64 import urllib2 def auto_login(urllink,username,password): authstr = 'Bas ...