一、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. Recursive Depth first search graph(adj matrix)

    1 深度优先遍历邻接矩阵 1 邻接矩阵初始化 2 访问数组初始化 3 深度优先遍历邻接矩阵图 算法如下: bool MGraph[128][128]; bool visit[128]; int vex ...

  2. hdoj 2222

    http://acm.hdu.edu.cn/showproblem.php?pid=2222 第一道 AC自动机.....trie树的建立 和 AC自动机的查询,,可作模版... 解题思路:AC的应用 ...

  3. openrisc 之 Wishbone总线学习笔记——总线特性

    特性: 一,互联方式: 支持点到点.共享总线.十字交叉(Crossbar)和基于交换结构(Switch fabric)的互联. 二,数据操作方式:单次读/写操作.块读/写操作,读改写(RMW,Read ...

  4. QStringLiteral（源代码里有一个通过构造函数产生的从const char*到QString的隐式转换，QStringLiteral字符串可以放在代码的任何地方，编译期直接生成utf16字符串，速度很快，体积变大）

    原作者: Olivier Goffart 点击打开链接http://woboq.com/blog/qstringliteral.html 译者: zzjin 点击打开链接http://www.tuic ...

  5. 用C语言写一个程序，得出当前系统的整形数字长（16位，32位，64位）等，不能使用sizeof()

    #include <iostream>#include <cmath>using namespace std; int main(){ int num = -1; unsign ...

  6. poj 2363 Blocks(暴力)

    题目链接:http://poj.org/problem?id=2363 思路分析:由于数据较小,采用暴力搜索法.假设对于矩形边长 1 <= a <= b <= c <= N; ...

  7. HDU 4734 F(x) 2013 ACM/ICPC 成都网络赛

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4734 数位DP. 用dp[i][j][k] 表示第i位用j时f(x)=k的时候的个数,然后需要预处理下小 ...

  8. 西门子PLC学习笔记二-（工作记录）

    今天师傅给讲了讲做自己主动化控制的总体的思路,特进行一下记录,做个备忘. 1.需求分析 本次的项目是对楼宇循环供水的控制,整个项目须要完毕压力.压差.温度等的获取及显示.同一时候完毕电机的控制. 2. ...

  9. Chapter 6 装饰模式

    修饰模式,是面向对象编程领域中,一种动态地往一个类中添加新的行为的设计模式.就功能而言,修饰模式相比生成子类更为灵活,这样可以给某个对象而不是整个类添加一些功能. 例如:DataOutputStrea ...

  10. Spring IOC(DI)之注入方式

    一次被问到IOC的注入方式,当时脑袋一阵混乱,不知道噻.于是google了一下,发现众说纷纭,有说三种的,有说四种的.都滚犊子吧,还是看看官方文档吧. DI exists in two major v ...