<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             window.onload=function(){

                 var oBtn=document.getElementById('btn1')

                 var oUl=document.getElementById('ul1')

                 var oTxt=document.getElementById('text1')

                 oBtn.onclick=function(){

                     var oLi=document.createElement('li')

                     var aLi=oUl.getElementsByTagName('li')

                     oLi.innerHTML=oTxt.value

                     if(aLi.length>0){

                         oUl.insertBefore(oLi,aLi[0])

                     }

                     else{

                         oUl.appendChild(oLi)

                     }

                 }

             }

         </script>

     </head>

     <body>

         <input type="text" id="text1" />

         <input type="button" id="btn1" value="creat lis" />

         <ul id="ul1"></ul>

     </body>

 </html>

创建DOM元素，这里有几个小事项需要注意。

第一：光写createlement是不够的，后面必须要和appendChild或者insertBefore搭配使用才会有创建DOM的效果。

第二：appendChild在IE7里是有问题的，注意看，我们的UL里一开始是没有li的，所以aLi[0]在IE7里是读不出来的。这里用了一个if else结构解决这个问题。

第三：我们这里实现了将Text里，我们输入的文字转到新建的li里。用的是innerHTML这个代码。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             window.onload=function()

             {

                 var oUl=document.getElementById('ul1')

                 var aA=document.getElementsByTagName('a')

                 for(i=0;i<aA.length;i++){

                     aA[i].onclick=function(){

                         oUl.removeChild(this.parentNode)

                     }

                 }

             }

         </script>

     </head>

     <body>

         <ul id="ul1">

             <li>1111111111<a href="#">delete</a></li>

             <li>2222222222<a href="#">delete</a></li>

             <li>3333333333<a href="#">delete</a></li>

             <li>4444444444<a href="#">delete</a></li>

             <li>5555555555<a href="#">delete</a></li>

         </ul>

     </body>

 </html>

这里只需要注意这点

oUl.removeChild(this.parentNode)
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             window.onload=function(){

                 var oUl=document.getElementById('ul1')

                 var oFrag=document.createDocumentFragment()

                 for(i=0;i<10000;i++){

                     var oLi=document.createElement('li')

                     oFrag.appendChild(oLi)

                 }

                 oUl.appendChild(oFrag)

             }

         </script>

     </head>

     <body>

         <ul id="ul1"></ul>

     </body>

 </html>

文档碎片，理论上可提高性能。

JS学习第二课的更多相关文章

  1. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

  2. Git速成学习第二课：管理修改与删除文件

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 管理修改 首先我们需要明确,为什么说Git管理的是修改而不是文件呢? 我们首先对于已有的read ...

  3. Linux课程学习 第二课

    工欲善其事,必先利其器 虚拟机安装(链接中有详细的操作方法,这里就不再详细说明了,但有注意事项,会在下文中截图标注) https://www.linuxprobe.com/  注:为了避免是权限问题导 ...

  4. Shell脚本学习第二课·

    Shell文件包含 shell也可以包含外部脚本,语法格式如下: . filename 或 source filename 例如创建两个shell脚本. 脚本1:test1.sh url = &quo ...

  5. JS学习第一课

    1.js 按照编写顺序执行 2.输出使用document.write. 3.申明数组 var array = [1,2,3,5] ;  var arrStr = ["sgsg",& ...

  6. Ext JS学习第二天 我们所熟悉的javascript（一）

    此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascrip ...

  7. Struts2学习第二课 Struts2概述

    Struts2是一个用来开发MVC应用程序的框架,它提供了Web应用程序开发过程中的一些常见问题飞解决方案: -对来自用户的输入数据进行合法性验证 -统一的布局 -可扩展性 -国际化和本地化 -支持A ...

  8. javascript学习第二课

    主要内容: 1.不可变的原始值和可变的对象引用 javascript中的原始值(undefined.null.布尔值.数字和字符串)与对象(包括数组和函数)有着根本的区别.原始值是不可更改的;任何方法 ...

  9. js学习第二篇简单语法

    字符串(String)字面量 可以使用单引号或双引号 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {first ...

随机推荐

  1. Android开发 Unity3D基础 Android Development

    开发环境 Window 7 Unity3D 3.3.0 MB525 defy Android 2.1-update1 本次学习: 1.认识Unity 2.Unity3D环境搭建与Android软件生成 ...

  2. TP复习12

    四.特殊标签 1.比较标签 eq或者 equal 等于 neq 或者notequal 不等于 gt 大于 egt 大于等于 lt 小于 elt 小于等于 heq 恒等于 nheq 不恒等于 2.范围标 ...

  3. windows 支持curl命令

    curl 是一般linux发行版中都带有的小工具,利用这个工具可以很方便的下载文件, 我一般使用这个工具来查看某个页面相应的HTTP头信息,在Windows系统中我们也一样可以使用这个工具,如果不需要 ...

  4. iOS开发——实战篇Swift篇&UItableView结合网络请求，多线程，数据解析，MVC实战

    UItableView结合网络请求,多线程,数据解析,MVC实战 学了这么久的swift都没有做过什么东西,今天就以自己的一个小小的联系,讲一下,怎么使用swift在实战中应用MVC,并且结合后面的高 ...

  5. ios开发——实用技术篇&数据保存于恢复

    数据保存于恢复 用户操作(输入数据)之后,应用程序退出并且终止之后,当用户再次打开应用的时候还是保持原来的状态 一:在storyBoard中设置恢复标志符 二:在AppDalegate中代理方法 -( ...

  6. MySQL优化---DBA对MySQL优化的一些总结

      非原创, 来自梦嘉朋友, 非常好的总结, 一起学习. ------------------------------------------------- 1. 要确保有足够的内存数据库能够高效的运 ...

  7. 项目源码--Android答题类游戏源码

    下载源码 技术要点: 1. 精致的答题UI 2. Android的Http通信技术 3. Android数据库QLITE与其他数据存储技术 4. Android在线音乐背景技术 5. Android答 ...

  8. QQ群信息统计

    接口一: 1:QQ群信息统计 地址:http://localhost:8080/webServices/messageSort 注意:连接地址提交的是一个txt文件,返回是一个list的json字符串 ...

  9. 解析 iOS 动画原理与实现

    这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...

  10. Javascript教程：AngularJS的五个超酷特性

    AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它 ...