一、DOM的创建，插入，删除

　　createElement(标签名)　　appendChild(节点)　　insertBefore(节点，原有节点)　　removeChild(节点)　

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>创建，删除,插入元素</title>
 <script>
 window.onload = function(){
     var oUl = document.getElementById('ul1');
     var oUl2 = document.getElementById('ul2');
     var oBtn = document.getElementById('btn1');
     var oBtn2 = document.getElementById('btn2');
     var oBtn3 = document.getElementById('btn3');
     var oTxt = document.getElementById('txt1');

     oBtn.onclick = function(){
         var oLi = document.createElement('li');

         oLi.innerHTML = oTxt.value;
         oUl.appendChild(oLi);
     };

     //insertBefore    插入到...之前
     oBtn2.onclick = function(){
         var oLi = document.createElement('li');

         oLi.innerHTML = oTxt.value;

         if(oUl.children.length == 0){
             oUl.appendChild(oLi);
         }else{
             oUl.insertBefore(oLi, oUl.children[0]);
         }
     };

     oBtn3.onclick = function(){
         oUl2.removeChild(oUl2.children[0]);
     };
 };
 </script>
 </head>

 <body>
 <input id="txt1" type="text" /><button id="btn1">创建元素</button><button id="btn2">插入到第一位</button><button id="btn3">删除元素</button>
 <ul id="ul1">

 </ul>
 <hr />
 <ul id="ul2">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
 </ul>
 </body>
 </html>

javascript每日一练（四）——DOM二的更多相关文章

  1. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  2. javascript每日一练（三）——DOM一

    一.Dom基础 childNodes(有兼容问题),children nodeType getAttribute() firstChild,lastChild,previousSilbing,next ...

  3. javascript每日一练（二）——javascript（函数，数组）

    一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2, ...

  4. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  5. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

  7. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  8. javascript每日一练（五）——BOM

    一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...

  9. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. Fedora 17 安装 完全 指南

    一.了解Fedora 17先来了解一下Fedora吧.它是由Red Hat赞助的一个全球性开源项目,秉承“自由”.“友爱”.“杰出”.“前卫”宗旨. 1.Fedora 17的主要系统改进内核:采用3. ...

  2. css中border-width 属性

    border-width属性可能的值 值 描述 thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. inherit 规定 ...

  3. mysql记录慢查询

    1,配置开启 Linux: 在mysql配置文件my.cnf中增加 log-slow-queries=/var/lib/mysql/slowquery.log (指定日志文件存放位置,可以为空,系统会 ...

  4. Linux CPU 负载度量公式

    一个top命令不就行了么?顶多再加一些管道什么的过滤一下.我一开始也是这么想得.其实还可以理解的更多. 首先一个问题,是统计某个时间点的CPU负载,还是某个时间段的? 为了画折线图报表,一般横坐标都是 ...

  5. c.Tom and paper

    Tom and paper Description There is a piece of paper in front of Tom, its length and width are intege ...

  6. Activity中Menu相关的几个方法的调用时机

    用于创建菜单的常用的方法有如下两种: 1.onCreateOptionsMenu(Menu menu) 2.onPrepareOptionsMenu(Menu menu) MyDiaryActivit ...

  7. PHP使用纯真IP数据库

    #纯真数据库调用函数(需要下载纯真数据库文件) function convertip($ip) { $ip1num = 0; $ip2num = 0; $ipAddr1 =""; ...

  8. fancyBox简单入门

    1. 下载 fancyBox,解压后根据需要将文件复制到网页文件夹中(建议不要更改目录结构),并在网页源码中引入相应的 css 样式和 js 文件(如果更改了目录结构,引入的时候请调整相应代码,对应它 ...

  9. Clojure学习01：开始起步

    我们先要了解下什么是Clojure,我们从它的特性来了解: 1.首先它是一门编程语言,并且它写的程序是运行在jvm上的,同java语言一样. 2.Clojure代码可以使用任意java类库,反之jav ...

  10. 基于 JVMTI 实现 Java 线程的监控（转）

    随着多核 CPU 的日益普及,越来越多的 Java 应用程序使用多线程并行计算来充分发挥整个系统的性能.多线程的使用也给应用程序开发人员带来了巨大的挑战,不正确地使用多线程可能造成线程死锁或资源竞争, ...