效果：

代码：

<head runat="server">

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var oul = document.getElementById('ull');

            var obtn = document.getElementById('btn');

            var ot1 = document.getElementById('t1');

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

            obtn.onclick = function () {

                var oli = document.createElement('li');

                var ali = oul.getElementsByTagName('li');

                if (ali.length > 0) {

                    oul.insertBefore(oli, ali[0]);

                }

                else {

                    oul.appendChild(oli);

                }

                oli.innerHTML = ot1.value;

                //删除

                obtnRemove.onclick = function () {

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

                        oul.removeChild(ali[0]);

                    }

                }

            }

        };

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="text" id="t1" />

        <input type="button" id="btn" value="添加元素">

        <input type="button" id="btn1" value="删除元素">

        <ul id="ull">

        </ul>

    </div>

    </form>

</body>

点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. 点滴积累【JS】---JS实现仿百度模糊搜索效果

    效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...

  3. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  4. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  5. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  6. 点滴积累【JS】---JS小功能（操作Table--动态添加删除表格及数据）

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

  7. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  8. 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

  9. 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)

    效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...

随机推荐

  1. BZOJ2199: [Usaco2011 Jan]奶牛议会

    趁此机会学了一下2-SAT. 以前的2-SAT都是用并查集写的,只能应用于极小的一部分情况,这次学了一正式的2-SAT,是用一张有向图来表示其依赖关系. 2-SAT的介绍参见刘汝佳<训练指南&g ...

  2. Delphi美化界面 转载

    手头的项目做的差不多了,交给客户,结果给出的结论是界面太难看了,至少要做成像QQ类似的界面.(目前是QQ2009界面确实还是不错的,本人也非常喜欢). 1.透明问题. 要重新调整界面确实很麻烦,以前用 ...

  3. 分布式数据存储 - MySQL双主复制

    上篇文章<分布式数据存储 - MySQL主从复制>,我们说到MySQL主从复制很好的保障了从库,读的高可用性.so,问题来了: 1.针对主库,写的高可用性又是如何做到高可用性? 2.如果需 ...

  4. MapReduce实例

    1.WordCount(统计单词) 经典的运用MapReuce编程模型的实例 1.1 Description 给定一系列的单词/数据,输出每个单词/数据的数量 1.2 Sample a is b is ...

  5. 【poj2778-DNA Sequence】AC自动机+矩阵乘法

    题意: (只含AGCT)给定m个病毒串,让你构造一个长度为n的字符串(也只含有AGCT),问有多少种方案.n很大:1<=n<=2000000000 题解: 用病毒串建立AC自动机(num个 ...

  6. 多重背包问题II

    多重背包问题II 总体积是m,每个小物品的体积是A[i] ,每个小物品的数量是B[i],每个小物品的价值是C[i] 求能够放入背包内的最大物品能够获得的最大价值 和上一个很类似 上一题体积就是价值,这 ...

  7. unity Transform Find 的用法!!!

    用法: Transform Find(String name) 1.查找名为name的(transform.gameObject)直接子物体并返回该子物体的Transform属性.不能是孙子物体或更低 ...

  8. AcmeAir

    AcmeAir是一款由原 IBM 新技术架构部资深工程师Andrew Spyker,利用Netflix开源的Netflix OSS打造的开源电子商务应用.访问这里可以了解原作者的设计初衷: http: ...

  9. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解（三）

    前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...

  10. android+apimonitor+genymotion

    1. 安装genymotion: http://www.genymotion.net/ 2. 设置使用adb Setting--adb--选择sdk的目录 3. apimonitor https:// ...