一、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. 字符串-06. IP地址转换(20)

    #include<iostream> #include<string> #include<cmath> using namespace std; int main( ...

  2. pl/sql 的 put和put_line区别

    在学习PL/SQL脚本时,打印语句是用得最多的语句. 在Oracle中,又有两种打印的方法:put和put_line.它们的区别是:put:不换行输出,输出在缓冲区,不显示出来,直到执行put_lin ...

  3. （Java随机数举例）随机扔一千次硬币的正反次数

    方法一: public class coin{ public static void main(String args[]){ int n = 0; int m = 0; int len = 1000 ...

  4. C与C++ 无参函数的区别

    在<C++ 编程思想>:“关于无参函数声明,C与C++有很大的差别.在C语言中,声明int fun1(),意味着一个可以有任意数目和类型的函数:而在C++中,指的却是一个没有参数的函数”. ...

  5. ThinkPHP - 模板引擎

    1.导入css/js文件 - CSS文件 <!--<link rel="stylesheet" type="text/css" href=" ...

  6. 【JavaScript】强制缓存刷新

    1.在js引用时加入时间戳. <script> document.write('<script src="xxx.js?_dc='+new Date().getTime() ...

  7. linux 下搭建 ftp

    最近为了方便目标板与PC机上LINUX之间的通讯,就在LINUX搭建了FTP,工作不难,写个总结.主要经过以下几个步骤: 1.检查是否安装了vsftpd服务器 可以用rpm -q vsftpd命令来查 ...

  8. video.js的使用

    跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...

  9. ZOJ 3713 In 7-bit (题意不好理解，十进制、二进制、十六进制的转换问题)

    考验理解能力的时候到了 T^T Very often, especially in programming contests, we treat a sequence of non-whitespac ...

  10. HDU 3974 Assign the task 简单搜索

    根据Rex 的思路才知道可以这么写. 题目意思还是很好理解的,就是找到当前雇员最近的任务. 做法是,可以开辟一个 tim 变量,每次有雇员得到昕任务时候 ++tim 然后取寻找最近的任务的时候写一个搜 ...