代码：

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

<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. 无法创建链接服务器 "xxx" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例。 (Microsoft SQL Server，错误: 7302)

    出现这个错误,有两个最常见的两个原因 1.注册表 <1>按下WIN+R,打开“运行”窗口,输入“regedit”,回车 <2>在打开的注册表编辑器的左侧按如下路径依次展开: H ...

  2. iOS上传AppStore被拒原因及处理方案

    1.后台运行GPS 1.1 原文: Performance - 2.5.4 Your app declares support for location in the UIBackgroundMode ...

  3. Vladik and cards

    Vladik and cards time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. sqlserver2012评估期已过问题处理

    于之前安装sqlserver2012忘记输入序列号,现在出现评估期已过的问题,网上忙活半天,才解决,发现网上叙述都很凌乱,而且只有大意,新手很难操作,所以把我操作的过程分享给大家 步骤阅读   百度经 ...

  5. openstack私有云布署实践【4.2 上层代理haproxy+nginx配置 (办公网测试环境)】

    续上一节说明 一开始我也是使用haproxy来做的,但后来方式改了,是因为物理机controller的高配置有些浪费,我需要1组高可用的上层nginx代理服务器来实现其它域名80代理访问,很多办公网测 ...

  6. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  7. 使用bootstrap建立响应式网页——通栏轮播图（carousel）

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  8. Chapter 2 Open Book——28

    I kept my voice indifferent. "May I?" 我尽量让我的声音显得不那么突兀,我能试试吗? 我尽量让自己的声音显得漠不关心.“可以让我看一下吗?” H ...

  9. 浅析IO模型

    也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗.在进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型.下面本文先从同步和异步的概念 说起, ...

  10. 分享到QQ空间、新浪微博、腾讯微博和人人网

    function shareys(type, url, title, img, content) { switch (type) { case "sina": url = &quo ...