效果：

代码：

<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. c++中的原子操作

    1. c/c++标准中没有定义任何操作符为原子的,操作符是否原子和平台及编译器版本有关 2. GCC提供了一组内建的原子操作,这些操作是以函数的形式提供的,这些函数不需要引用任何头文件 2.1 对变量 ...

  2. uva 10817

    Problem D: Headmaster's Headache Time limit: 2 seconds The headmaster of Spring Field School is cons ...

  3. DF学Mysql（三）——Mysql数据类型

    Mysql数据类型分为:整数类型.浮点数类型.定点数类型日期与时间类型字符串类型二进制类型 整数类型 字节数 无符号数取值范围 有符号数取值范围TINYINT 1 0-255 -128-127SMAL ...

  4. poj 2975 Nim 博弈论

    令ans=a1^a2^...^an,如果需要构造出异或值为0的数, 而且由于只能操作一堆石子,所以对于某堆石子ai,现在对于ans^ai,就是除了ai以外其他的石子 的异或值,如果ans^ai< ...

  5. 编程实现Linux下的ls -l

    头文件 #ifndef __FUNC_H__ #define __FUNC_H__ #include <stdio.h> #include <stdlib.h> #includ ...

  6. 分布式 Key-Value 存储系统：Cassandra 入门

    Apache Cassandra 是一套开源分布式 Key-Value 存储系统.它最初由 Facebook 开发,用于储存特别大的数据. Cassandra 不是一个数据库,它是一个混合型的非关系的 ...

  7. Sqoop详细介绍包括：sqoop命令，原理，流程

    一简介 Sqoop是一个用来将Hadoop和关系型数据库中的数据相互转移的工具,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导进到Hadoop的HDFS ...

  8. iOS开发--git

    http://blog.chinaunix.net/uid-26495963-id-3474178.html 相关知识 gnu interactive tools 一句话概括git: Git is a ...

  9. WordPress主题制作教程5：循环

    wordpress循环分两种,一种是自定义循环,一种是默认循环. 自定义循环:根据指定参数进行实例化 调用所有页面,post_type值:page对应页面,post对应文章 <?php $arg ...

  10. Intellij Idea @Autowired取消提示

    在使用mybatis的代理进行开发时 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> ...