效果：

代码：

<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. 还是说Memory Model，gcc的__sync_synchronize真是太坑爹了

    还是说Memory Model,gcc的__sync_synchronize真是太坑爹了! 时间 2012-01-29 03:18:35  IT牛人博客聚合网站 原文  http://www.udpw ...

  2. cf 403 D

    D. Beautiful Pairs of Numbers time limit per test 3 seconds memory limit per test 256 megabytes inpu ...

  3. iOS第三方解决键盘遮挡－IQKeyboardManager

    百度云:http://pan.baidu.com/s/1yg5ae githun:https://github.com/hackiftekhar/IQKeyboardManager AppDelega ...

  4. error LNK2019: 无法解析的外部符号 ___glutInitWithExit@12，该符号在函数 _glutInit_ATEXIT_HACK@8 中被引用 1>GEARS.obj : er

    转: http://blog.csdn.net/bill_ming/article/details/8150111 opengl的高级菜鸟问题 看了一本书<OpenGL三维图形系统开发与应用技术 ...

  5. BZOJ 3224: Tyvj 1728 普通平衡树 vector

    3224: Tyvj 1728 普通平衡树 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除 ...

  6. lintcode:买卖股票的最佳时机 III

    买卖股票的最佳时机 III 假设你有一个数组,它的第i个元素是一支给定的股票在第i天的价格.设计一个算法来找到最大的利润.你最多可以完成两笔交易. 样例 给出一个样例数组 [4,4,6,1,1,4,2 ...

  7. Android核心分析之十九电话系统之GSMCallTacker

    GSMCallTracker在本质上是一个Handler.<IGNORE_JS_OP> 1.jpg (1.52 KB, 下载次数: 1) 下载附件  保存到相册 2012-3-22 11: ...

  8. java开发--反射技术

    学习目标: 1.什么是反射:即反射的定义, 2.反射有什么作用,能解决什么问题, 3.反射的知识点是什么, 4.反射的利弊 5.反射的例子 1.什么是反射:反射的定义: a) 能够分析类能力的程序被称 ...

  9. Docker搭建MySQL服务

    Docker开源镜像 前面我们已经安装好了Docker,也简单了解了Docker.那么我们可以尝试搭建一个MySQL服务. 要搭建服务就要启动服务容器,要创建容易就要有镜像,Docker提供了一个类似 ...

  10. WordPress主题制作教程4：调用指定页面内容

    假设页面page_id=86 $page_id = 86; echo "标题:".get_post($page_id)->post_title; echo "内容: ...