一、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. json在PHP中应用技巧

    一.json_encode() 该函数主要用来将数组和对象,转换为json格式.先看一个数组转换的例子: $arr = array ('a'=>1,'b'=>2,'c'=>3,'d' ...

  2. [LeetCode]题解（python）：015-3Sum

    题目来源: https://leetcode.com/problems/3sum/ 题意分析: 这道题目是输入一个数组nums.找出所有的3个数使得这3个数之和为0.要求1.输出的3个数按小到大排序, ...

  3. 使用Jquery后去div个数

    <div id="tree1" class="tree-folder-content"> <div class="tree-fold ...

  4. 图的DFS递归和非递归

    看以前写的文章: 图的BFS:http://www.cnblogs.com/youxin/p/3284016.html DFS:http://www.cnblogs.com/youxin/archiv ...

  5. Arcgis for javascript map操作addLayer具体解释

    本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...

  6. if语句之有房么？有钱么？有能力么？

    思路:1.如果有房,可以谈谈 2.如果没有房,问第二个条件有钱么,如果有,可以谈谈 3.如果没有房没有钱,则问第三个条件有能力么,如果有,可以谈谈 4.如果以上三个条件都没有,则拜拜 Console. ...

  7. BestCoder Round #50 (div.1) 1003 The mook jong (HDU OJ 5366) 规律递推

    题目:Click here 题意:bestcoder 上面有中文题目 分析:令f[i]为最后一个木人桩摆放在i位置的方案,令s[i]为f[i]的前缀和.很容易就能想到f[i]=s[i-3]+1,s[i ...

  8. 驱动：中断【2】中断处理程序、中断上下文中处理延时及一些函数的调用规则（调IIC中断驱动有感）

    中断处理程序.中断上下文中处理延时及一些函数的调用规则(调IIC中断驱动有感)http://blog.csdn.net/samantha_sun/article/details/6790492 1,中 ...

  9. STL中deque

    以下学习一下STL中另一种序列容器——deque. deque表示double-ended queue,即双向队列,deque是通过作为动态数组的方式实现的,这样可以在两端插入元素.因此,deque可 ...

  10. memcache 在php存取中的应用

    当用户刷新网页或有大量用户访问网站时,就会产生大量数据库查询进程,这不但拖慢了网页打开速度,同时也给服务器带来了很大压力. 作为php菜鸟,今天刚刚接触到了 memcache 这个东东,于是自己跟着文 ...