<!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 C2DM学习 - 云端推送

    一.基础知识 当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数据,比如<地震及时通>就需要及时获取服务器上最新的地震信息.要获取服务器上不定时更新的信息一般来说有两种方 ...

  2. TP复习15

    ## ThinkPHP 3.1.2 URL#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小 ...

  3. Lucene的DocFieldProcessor类

    DocFieldProcessor类的任务1 按顺序存储所有的field和对应的fieldinfo2 为当前这篇doc的field按照fieldname来建立hash索引3 调用InvertedDoc ...

  4. C语言中的各种修饰符

    C允许同时使用多于一个的修饰符,这就使得可以创建一下各种类型: int board[8][8];//int数组的数组 int **ptr;//指向int的指针的指针 int *risk[10];//具 ...

  5. Graylog2+mongdb+rsyslog中央日志服务器对syslog的web管理--转载

    原文地址:http://blog.sina.com.cn/s/blog_49be4d570100yvv1.html 1.下载mongodb,可以通过下面2中方法安装. (1)官网下载yum源后直接安装 ...

  6. Squish License

    https://www.froglogic.com/squish/gui-testing/prices-and-licensing/index.php Prices and Licensing Who ...

  7. 内存映射mmap

    Table of Contents 1. 什么是mmap 2. 使用方法 2.1. mmap构造器的格式 2.2. 例子1 2.3. 例子2 3. 其它 4. 参考资料 什么是mmap 通常在Unix ...

  8. C#属性(Attribute)用法实例解析

    属性(Attribute)是C#程序设计中非常重要的一个技术,应用范围广泛,用法灵活多变.本文就以实例形式分析了C#中属性的应用.具体入戏: 一.运用范围 程序集,模块,类型(类,结构,枚举,接口,委 ...

  9. C#.Net中的转义字符(转)

    当声明一个字符串变量时有一些字符是不能以平常的方式包含在变量中的.为了解决这个问题,C#提供了两种不同的方法. 第一种方法是使用’转义序列’.例如,我们想得到如下的字符串 “Hello World H ...

  10. java 编程军规

    军规条例军规一:[避免在程序中使用魔鬼数字,必须用有意义的常量来标识.]军规二:[明确方法的功能,一个方法仅完成一个功能.]军规三:[方法参数不能超过5个]军规四:[方法调用尽量不要返回null,取而 ...