一、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. CQRS架构设计及其实现

    CQRS架构设计及其实现 一.为什么要实践领域驱动? 近一年时间我一直在思考一个问题:“如何设计一个松耦合.高伸缩性.易于维护的架构?”.之所以有这样的想法是因为我接触的不少项目都是以数据库脚本来实现 ...

  2. 数据切分——MySql表分区概述

    定义:         表的分区指根据可以设置为任意大小的规则,跨文件系统分配单个表的多个部分.实际上,表的不同部分在不同的位置被存储为单独的表.用户所选择的.实现数据分割的规则被称为分区函数,这在M ...

  3. boost::bind的使用方法

    bind - boost 头文件: boost/bind.hpp bind 是一组重载的函数模板.用来向一个函数(或函数对象)绑定某些参数. bind的返回值是一个函数对象. 它的源文件太长了. 看不 ...

  4. Physiological Processes of Speech Production--Reading Notes (8)

    Upper Jaw The upper jaw, or the maxilla with the upper teeth, is the structure fixed to the skull, f ...

  5. Hive实现oracle的Minus函数

    在Oracle中minus运算的主要功能是: 在进行两个表格或者两个查询结果的时候,返回在第一个表格/查询结果中与第二个表格/查询结果不同样的记录. 结果不同样的记录包括两种情况:A,B 表中某一行的 ...

  6. STL之vector详解

    一.vector容器的自增长 首先,我们知道vector容器是由数组做出来的:它具备了数组的优缺点. 数组的优点: 操作数据,读取速度很快,因为有下标: 数组的缺点: 分配之后不能在改变大小: #in ...

  7. CentOS6.5 下在Nginx中添加SSL证书以支持HTTPS协议访问

    参考文献: 1. NginxV1.8.0安装与配置 2. CentOS下在Nginx中添加SSL证书以支持HTTPS协议访问 3. nginx配置ssl证书的方法 4.nginx强制使用https访问 ...

  8. CURL基础

    下载单个文件: #下载单个文件,默认将输出打印到标准输出中(STDOUT)中curl http://www.centos.org # 将文件下载到本地并命名为mygettext.html curl - ...

  9. 利用phpmailer类邮件发送

    <?php require("class.phpmailer.php"); //下载的文件必须放在该文件所在目录 $mail = new PHPMailer(); //建立邮 ...

  10. QT 静态编译后中文可能会出现乱码

    QT 静态编译后中文可能会出现乱码.这是因为处理文字编码的 libqcncodecs 库是以 plugin 形式存放在 QT 静态编译目录/plugs/codecs/libqcncodecs.a 文件 ...