代码：

——————————————————————————————

<script type="text/javascript">    
            //倒排序子元素的函数
            function deleteChilds(){
                //获取父DOM
                var ul = document.getElementsByTagName('UL')[0];
                if(ul.hasChildNodes()){//判断是否包含子元素
                    //子元素的个数
                    var len = ul.childNodes.length;
                    var arr = [];    //新数组变量用于存储节点
                    for(var i=0;i<len;i++){//遍历
                        //把节点存入数组
                        arr[i] = ul.childNodes[0];
                        //从第一个元素开始删除
                        ul.removeChild(ul.childNodes[0]);
                    }
                    //倒过来遍历所有节点
                    for(var i=len-1;i>=0;i--){
                        ul.appendChild(arr[i]);//添加到ul为子元素
                    }
                }
            }
        </script>

————————————————————————————————————

<body style="text-align:center">
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
        <br>
        <input type="button" onclick="deleteChilds()" value="倒排序子元素"/>
    </body>

————————————————————————————————————

DOM操作-倒排序子元素的更多相关文章

  1. DOM操作，控制HTML元素 （原生JS）

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...

  2. DOM操作-动态创建网页元素

    动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...

  3. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  4. DOM操作-引用同级的元素

    代码: ———————————————————————————————— <script type="text/javascript">            //获取 ...

  5. JavaScrip——DOM操作（查找HTML元素/修改元素）

    innerHTML 1.查找元素——document.getElementById("intro") 2.输出查找的结果: (1)var a=document.getElement ...

  6. 实现类数组转化成数组(DOM 操作获得的返回元素值是一个类数组)

    目标 实现类数组转化成数组 实例 链接地址 使用方法 const foo = document.querySelectorAll('.result') //链接地址输入控制台输入这行代码 const ...

  7. DOM操作元素

    DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...

  8. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  9. 前端最佳实践——DOM操作

    1.浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理. 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Rend ...

随机推荐

  1. ie6的png24问题

    解决IE6的PNG透明JS插件 DD_belatedPNG 引:http://www.cnblogs.com/cobby/archive/2012/05/11/2495801.html IE6的PNG ...

  2. WinSpy涉及的windows api

    WinSpy涉及的windows api WinSpy是仿造微软Spy++的开源项目,但只涉及Spy++的窗口句柄.窗口的属性.styles.类名子窗口.进程线程信息等查找功能.功能虽然不算强大,但涉 ...

  3. log4j.properties全配置 （转）

    ###############################log4j.properties############################### ##### Global Log Leve ...

  4. Spire.XLS 在程序中直接打印excel

    上代码 if (tbPrintSetBindingSource.Current == null) return; var item_TbPrintSet = tbPrintSetBindingSour ...

  5. 《JavaScript高级程序设计》读书笔记 ---小结

    对象在JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下: 引用类型与传统面向对象程序设计中的类相似,但实现不同: Object 是一个基础 ...

  6. MarkDown初遇

    MarkDown初遇 纠结盘桓许久,由于那只胖纸,最终决定再次捡起博客这个东东,记录记录生活中.心灵里的点点滴滴. 寻觅的过程中忽然发现MarkDown这个东东,查了查,学习成本不高,简洁而标准,关键 ...

  7. Linux格式化字符串

    > 常用 > 详细 给定的格式FORMAT 控制着输出,解释序列如下: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期 ...

  8. intellij idea 12 搭建maven web项目 freemarker + spring mvc(续)

    上次有2个东西没整明白,一个就是controller的注解使用RequestMappingHandlerAdapter报错 No adapter for handler [controller.Use ...

  9. 转：详解JMeter正则表达式（2）

    例如, 引用名称:MYREF. 正则表达式:name="(.+?)" value="(.+?)". 模板:$1$$2$. 不要用/ /封装正则表达式. 如下变量 ...

  10. Apache Kafka开发入门指南(1)

    Apache Kafka可以帮助你解决在发布/订阅架构中遇到消费数百万消息的问题.如今,商业应用.社交应用以及其它类型的应用产生的实时信息在不断增长,这些信息需要以简单的方式快速.可靠地路由到各种类型 ...