<!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. careercup-高等难度 18.5

    18.5 有个内含单词的超大文本文件,给定任意两个单词,找出在这个文件中这两个单词的最短距离(也即相隔几个单词).有办法在O(1)时间里完成搜索操作吗?解法的空间复杂度如何? 解法1:我们假设单词wo ...

  2. 如何快速掌握CSS（各种CSS工具）

    CSS中的大量属性难以记忆,通过组合多种CSS工具,可以快速学习常见样式,并提高设计效率.这里给大家推荐一些比较好的在线工具,通过所见即所得图形化界面设计样式,直接得到对应的CSS代码.相比臃肿的集成 ...

  3. 入门之--linux配置php

    [下载php源码]:从php的官方网站下载php的安装源码包. [解压安装包]:下载的安装包是经过压缩的gz格式,在linux可以使用自带的工具tar进行解压,在安装包所在目录执行命令:tar -zx ...

  4. mysql记录sql执行时间

    1.开启和关闭mysql> set profiling=1;mysql> set profiling=0; information_schema 的 database 会建立一个PROFI ...

  5. C# 程序集反射

    namespace AssemblyLibrary { public class AssemblyLibrary { public static object LoadAssembly(string ...

  6. (转)Android学习笔记③——常用快捷键

    常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定位,存在两种跳转:在定义处可以跳转到调用处,在调用处可以跳转到定义处. 快捷键:Cmd + 鼠标单击 方法间跳转 描述:从一个类方法跳转到临近的一 ...

  7. 原来腾讯还出过一个开源项目libco

    虽然只能在OpenSUSE上使用,还是应该赞一个的.

  8. seajs第二节，seajs各模块依赖关系

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  9. VC++ UTF-8与GBK格式转换

    // 注释:多字节包括GBK和UTF-8 int GBK2UTF8(char *szGbk,char *szUtf8,int Len) { // 先将多字节GBK(CP_ACP或ANSI)转换成宽字符 ...

  10. Speex回声消除代码分析

    先说明下,这里的代码流程是修改过的Speex流程,但与Speex代码差异不大,应该不影响阅读.   (1)用RemoveDCoffset函数进行去直流 (2)远端信号预加重后放入x[i+frame_s ...