<!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. asp.net负载均衡方案[转]

    在前面的几篇文章中,主要谈到了在Discuz!NT中的跨站缓存数据,数据库负载均衡.但如果要实现将产品分布式布置到若干机器,组成集群来共同支撑起整个业务的话,还是有一定问题的(后面会有所介绍).下面先 ...

  2. docker（4）：coreos+docker+rancher真厉害

    http://blog.csdn.net/freewebsys/article/category/3103827

  3. WSS3.0 SDK中的不同列表类型的对应值

    Value Description 100 Generic list 101 Document library 102 Survey 103 Links list 104 Announcements ...

  4. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 5.全局防护Bypass之宽字节注入

    0x01 背景 首先我们了解下宽字节注入,宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而导致的注入漏洞.具体原 ...

  5. mkinitrd 与 mkinitramfs

    转载:http://blog.csdn.net/mayouyang/article/details/3997849 在进行内核编译时,需要进行制作initrd.img.在Fedora下面一般是用mki ...

  6. JSON使用——获取网页返回结果是Json的代码

    public String getWebData(String strUrl){ String json = null; try { URL url = new URL(strUrl); HttpUR ...

  7. 让Laravel5支持memcache的方法

    Laravel5框架在Cache和Session中不支持Memcache,看清了是Memcache而不是Memcached哦,MemCached是支持的但是这个扩展真的是装的蛋疼,只有修改部分源码让其 ...

  8. org.apache.hadoop.conf-Configured

    org.apache.hadoop.conf中的最后一个类,也是这个包中以后用的最频繁的一个,Configurable算是肉体,Configuration算是灵魂吧 package org.apach ...

  9. web开发下的各种下载方法

    利用TransmitFile方法,解决Response.BinaryWrite下载超过400mb的文件时导致Aspnet_wp.exe进程回收而无法成功下载的问题. 代码如下: Response.Co ...

  10. Windows 之 win10快捷键

    1.Windows10系统常用快捷键: 1)贴靠窗口(窗口可以变为1/4大小放置在屏幕4个角落):Win +左/右 或 Win +上/下 2)切换窗口:Alt + Tab 3)任务视图(松开键盘界面不 ...