<!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安全：forceStopPackage对android的Alarm的影响

    也许一些使用alarmmanager做定时任务的同学遇到过这样的问题:设定alarm后,进入设置-->应用程序管理-->强行停止app后,定时任务就失效了. 简单的讲就是:force st ...

  2. iOS开发——实用技术OC篇&事件处理详解

    事件处理详解 一:事件处理 事件处理常见属性: 事件类型 @property(nonatomic,readonly) UIEventType     type; @property(nonatomic ...

  3. 关于javascript中的 执行上下文和对象变量

    什么是执行上下文 当浏览器的解释器开始执行我们的js代码的时候,js代码运行所处的环境可以被认为是代码的执行上下文,执行上下文(简称-EC)是ECMA-262标准里的一个抽象概念,用于同可执行代码(e ...

  4. Python练习题 004：判断某日期是该年的第几天

    [Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...

  5. Saving HDU

    Problem Description 话说上回讲到海东集团面临内外交困,公司的元老也只剩下XHD夫妇二人了.显然,作为多年拼搏的商人,XHD不会坐以待毙的.  一天,当他正在苦思冥想解困良策的时候, ...

  6. AsyncTask的介绍

    android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...

  7. [WinForm] 使用反射将业务对象绑定到窗体或控件容器

    在WebForm中,可以使用反射将业务对象绑定到 ASP.NET 窗体控件.最近做Winform项目,也参考WebForm中的代码实现同样的功能.     Winform没有提供类似WebForm中的 ...

  8. react-redux 学习笔记

    react 是 view 层的一个框架,负责展示数据:redux 控制数据流动,把数据存在唯一的 store 里,通过 action 来触发事件,reducer 来根据事件处理数据. redux 在通 ...

  9. iOS - 导航控制器

    1.导航控制器 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.bac ...

  10. JQuery POST请求乱码...

    引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? 问题的引入: var regid = $('#oregion').combobox('getV ...