效果：

代码：

  1. <head runat="server">
  2.     <title></title>
  3.     <script type="text/javascript">
  4.         window.onload = function () {
  5.             var oul = document.getElementById('ull');
  6.             var obtn = document.getElementById('btn');
  7.             var ot1 = document.getElementById('t1');
  8.             var obtnRemove = document.getElementById('btn1');
  9.             obtn.onclick = function () {
  10.                 var oli = document.createElement('li');
  11.                 var ali = oul.getElementsByTagName('li');
  12.                 if (ali.length > 0) {
  13.                     oul.insertBefore(oli, ali[0]);
  14.                 }
  15.                 else {
  16.                     oul.appendChild(oli);
  17.                 }
  18.                 oli.innerHTML = ot1.value;
  19.  
  20.                 //删除
  21.                 obtnRemove.onclick = function () {
  22.                     for (var i = 0; i < ali.length; i++) {
  23.                         oul.removeChild(ali[0]);
  24.                     }
  25.                 }
  26.             }
  27.         };
  28.     </script>
  29. </head>
  30. <body>
  31.     <form id="form1" runat="server">
  32.     <div>
  33.         <input type="text" id="t1" />
  34.         <input type="button" id="btn" value="添加元素">
  35.         <input type="button" id="btn1" value="删除元素">
  36.         <ul id="ull">
  37.         </ul>
  38.     </div>
  39.     </form>
  40. </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. Sqli-labs less 30

    Less-30 Less-30与less-29原理是一致的,我们可以看到less-30的sql语句为: 所以payload为: http://127.0.0.1:8080/sqli-labs/Less ...

  2. chapter 2

    1.分片:序列变量,字符串,列表,元组,集合..都可以使用分片来访问指定的数据项,分片三种方式:seq[]访问某个数据项,seq[-1]表示访问序列最后一个数据项,seq[-2]倒数第二个数据项. s ...

  3. 创建MySQL存储过程示例

    创建MySQL存储过程是学习MySQL数据库必须要掌握的知识,下文对创建MySQL存储过程作了详细的介绍,供您参考学习. AD:2013大数据全球技术峰会课程PPT下载 下文将教您如何创建MySQL存 ...

  4. ExtJs之DHTML,DOM,EXTJS的事件绑定区别

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  5. WebSocket API简介

    WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如Chrome,Safari,Firefox,Opera,IE等等,对该协议支持最早的应该是chrome,从chr ...

  6. RTP-实时协议

    RTP,实时协议被用来为应用程序如音频,视频等的实时数据的传输提供端到端(end to end)的网络传输功能.传输的模型可以是单点传送或是多点传送.数据传输被一个姐妹协议——实时控制协议(RTCP) ...

  7. web.xml配置bug之提示The content of element type "web-app" must match "(icon?,display- name?,description?,distributable?,

    错误:配置web.xml时,出现红色叉叉,提示 The content of element type "web-app" must match "(icon?,disp ...

  8. 一个简单的ObjC和JavaScript交互工具

    https://github.com/changjianfeishui/XBWebBridge ObjectiveC与Js交互是常见的需求,可对于新手或者所谓的高手而言,其实并不是那么简单明了.这里只 ...

  9. MyBatis学习总结_14_Mybatis使用技巧总结

    1. 区分 #{} 和 ${}的不同应用场景 1)#{} 会生成预编译SQL,会正确的处理数据的类型,而${}仅仅是文本替换.对于SQL: select * from student where xC ...

  10. LINUX下的MYSQL默认表名区分大小写

    让MYSQL不区分表名大小写的方法其实很简单: 1.用ROOT登录,修改/etc/my.cnf,该文件的路径也可能是/usr/my.cnf. 2.加入一行:lower_case_table_names ...