动态创建元素的三种方式：

第一种：

Document.write();

<body>

<input type="button" id="btn" value="生成元素" onclick="f1()"/>

<input type="text" value=""/>

<script>

        document.write("这是新添加的内容");

</script>

<div id="d">

    <script>

        document.write("<input type='text' value='123'/>");

    </script>

</div>

<script>

    function f1(){

        document.write("<input type='text' value='456'/>");

    }

    f1();

</script>

使用documen.write()创建元素时，会发生一个问题：默认情况之下，页面由上而下地加载，形成一个文档流，当执行完毕时，文档流就会关闭，从而将之前生成的元素冲刷掉，所以不推荐使用这种方法。

第二种：

使用innerHTML创建元素：

<body>

<div id="d"></div>

<input type="button" value="生成" id="btn"/>

<script>

    var txt=document.getElementById("txt");

    var d=document.getElementById("d");

    var btn=document.getElementById("btn");

    //此方法字符串具有不可变性，频繁的操作字符串会造成内存的浪费。

//    btn.onclick=function(){

//        for(var i=0;i<10;i++){

//            d.innerHTML+="<input type='text'><br />";

//        }

//    }

    //因此我们可以先定义一个数组，将字符串存储在数组当中，最后在将数组转化为字符串。

    var arr=[];

    btn.onclick=function(){

        for(var i=0;i<10;i++){

            arr.push("<input type='text'><br />");

        }

        d.innerHTML=arr.join("");

    }

</script>

</body>

此方法不适合创建很多元素（标签）时使用。

第三种：

使用document.createElement()创建一个元素：

<body>

<div id="d"></div>

<script>

    var d = document.getElementById("d"); //获取div的id

    var ul = document.createElement("ul");// 在这里创建一个ul标签

    d.appendChild(ul);         //将存储在内存中ul标签剪切到div之中

    var li = document.createElement("li");//因为都是字符串，所以需要加""是创建出来的一对标签

    ul.appendChild(li);    //将存储在内存中的li标签剪切到ul之中

    li.innerHTML ="1231321";

    li.id = "abc";

    ul.removeChild(li);  //使用removeChild()可以删除ul里面的li标签

</script>

</body>

插入节点：insertBefore()

（微博案例，后发布信息的人排在最上面）

elementNode.insertBefore(new_node,existing_node)

new_node

必需。要插入的节点。

existing_node

必需。已有节点。在此节点之前插入新节点。

 
<script src="common.js"></script>

<div id="dv">

    <ul id="ul">

        <li>11111</li>

        <li id="li2">22222</li>

        <li>33333</li>

        <li>44444</li>

    </ul>

    <script>

        var ul=$$("ul");

        var lis2=$$("li2");

        var lis=ul.children;

        ul.insertBefore(li2,lis[0]);//li2为需要插入的节点，lis[0]是需要插入的节点的位置。

    </script>

运行结果：

两个事件：onkeydown与onkeyup

Onkeydown键盘按下时触发，不会获得当前的输入内容；

<body>

<script src="common.js"></script>

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

<script>

    var input=$$("input");

    input.onkeydown=function(){

        console.log(input.value);

    }

//    input.onkeyup=function(){

//        console.log(input.value);

//    }

</script>

</body>

Onkeyup  键盘按下并释放时才会触发

<body>

<script src="common.js"></script>

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

<script>

    var input=$$("input");

//    input.onkeydown=function(){

//        console.log(input.value);

//    }

    input.onkeyup=function(){

        console.log(input.value);

    }

</script>

</body>
Onkeydown 每输入一个键，按下一个键时打印上一个键
Onkeyup每输入一个k是，释放键盘时打印，若是不松开将不会打印

												


											
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理的更多相关文章
	

    
								
  1. Delphi中动态创建窗体有四种方式
		
    Delphi中动态创建窗体有四种方式,最好的方式如下: 比如在第一个窗体中调用每二个,主为第一个,第二个设为动态创建 Uses Unit2; //引用单元文件 procedure TForm1.But ...
    
		
    2. 
						
  2. 0036 Java学习笔记-多线程-创建线程的三种方式
		
    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...
    
		
    3. 
						
  3. 仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））
		
    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...
    
		
    4. 
						
  4. JavaWeb_(Struts2框架)Struts创建Action的三种方式
		
    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
    
		
    5. 
						
  5. spring创建bean的三种方式
		
    spring创建bean的三种方式: 1通过构造方法创建bean(最常用) 1.1 spring默认会通过无参构造方法来创建bean,如果xml文件是这样配置,则实体类中必须要有无参构造方法,无参构造 ...
    
		
    6. 
						
  6. Java并发编程：Java创建线程的三种方式
		
    目录 引言 创建线程的三种方式 一.继承Thread类 二.实现Runnable接口 三.使用Callable和Future创建线程 三种方式的对比 引言 在日常开发工作中,多线程开发可以说是必备技能 ...
    
		
    7. 
						
  7. java创建线程的三种方式及其对比
		
    第一种方法:继承Thread类,重写run()方法,run()方法代表线程要执行的任务.第二种方法:实现Runnable接口,重写run()方法,run()方法代表线程要执行的任务.第三种方法:实现c ...
    
		
    8. 
						
  8. AJPFX总结java创建线程的三种方式及其对比
		
    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...
    
		
    9. 
						
  9. java创建线程的三种方式及其对照
		
    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类.并重写该类的run方法,该run方法的方法体就代表了线程要完毕的任务.因此把run()方法称为运行 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. nbu恢复 oracle10g rac asm 到单实例asm（恢复某个表空间）
			
    一 检验条件 二 准备工作 1 创建相关目录 mkdir -p /oracle/admin/orcl/adumpmkdir -p /oracle/admin/orcl/bdumpmkdir -p /o ...
    
			
    2. 
						
  2. cocos2dx loading界面 预加载资源 与 资源释放
			
    预加载图片: 1.CCTextureCache::sharedTextureCache()->addImage("icon.png"); 2.CCTextureCache:: ...
    
			
    3. 
						
  3. 记一个eclipse 错误 Undefined variable from import: randrange
			
    我自己定义了一个random.py   和pev的包含路径一样的 解决办法是: 出现这种问题,可以import 这个模块,print 这个模块
    
			
    4. 
						
  4. loadrunner负载测试实例
			
    回想起第一次做性能测试,感慨万千,故写下本文,从:设置虚拟用户,设置场景以及分析运行结果三个方面进行阐述 硬件环境:硬盘 1TG,cpu 3.40GHz,内存4G 软件环境:IE9.0,Weblogi ...
    
			
    5. 
						
  5. 简单实用的Windows命令（二）
			
    昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
    
			
    6. 
						
  6. 3，SFDC 管理员篇 - 区域划分
			
    1,销售区域划分 Setup | Administrator | Manage Territory Territory Type : 帮助用户建立大的销售区域分类,分类顺序按照Priority进行显示 ...
    
			
    7. 
						
  7. ASP.Net将图片以二进制方式存入数据库,并读取
			
    把图片转换成二进制--把二进制转换成图片 private void button1_Click(object sender, EventArgs e) { string path = this.tex ...
    
			
    8. 
						
  8. MSsql 服务器之间远程及其链接查询
			
    先指定端口1433(SQL,协议里面设置) 然后启用 菜单-程序-外围服务应用配置-服务和连接时外围应用配置 试试远程连接 成功连接OK 下面示例链接服务器.上面远程是必须走的一步动作. --创建链接 ...
    
			
    9. 
						
  9. Firefox 23中的新特性（新陷阱）
			
    话说有一天突然发现我们的网站页面上的JQuery功能都失效了,Firebug中显示如下的错误 Blocked loading mixed active content "http://xxx ...
    
			
    10. 
						
  10. pyhton函数——黑板客老师课程学习
			
    1.基本语法 语法: def func_name (arguments)  定义 statements return x,y x,y=func_name(para)   调用 作用域: 可以给内置的函 ...
    
			
    11.