js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式：
第一种：
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两个事件整理的更多相关文章
- Delphi中动态创建窗体有四种方式
Delphi中动态创建窗体有四种方式,最好的方式如下: 比如在第一个窗体中调用每二个,主为第一个,第二个设为动态创建 Uses Unit2; //引用单元文件 procedure TForm1.But ...
- 0036 Java学习笔记-多线程-创建线程的三种方式
创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...
- 仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））
仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...
- JavaWeb_(Struts2框架)Struts创建Action的三种方式
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- spring创建bean的三种方式
spring创建bean的三种方式: 1通过构造方法创建bean(最常用) 1.1 spring默认会通过无参构造方法来创建bean,如果xml文件是这样配置,则实体类中必须要有无参构造方法,无参构造 ...
- Java并发编程：Java创建线程的三种方式
目录 引言 创建线程的三种方式 一.继承Thread类 二.实现Runnable接口 三.使用Callable和Future创建线程 三种方式的对比 引言 在日常开发工作中,多线程开发可以说是必备技能 ...
- java创建线程的三种方式及其对比
第一种方法:继承Thread类,重写run()方法,run()方法代表线程要执行的任务.第二种方法:实现Runnable接口,重写run()方法,run()方法代表线程要执行的任务.第三种方法:实现c ...
- AJPFX总结java创建线程的三种方式及其对比
Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...
- java创建线程的三种方式及其对照
Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类.并重写该类的run方法,该run方法的方法体就代表了线程要完毕的任务.因此把run()方法称为运行 ...
随机推荐
- linux iostat 性能指标说明
Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视. 它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况. ...
- 【解决】AgentSVN不能输入用户名/密码的问题
在Microsoft SQL Server Management Studio中使用AgentSVN时,在完成如下图中配置时, 会提示认证失败错误.其原因是没有输入SVN用户和密码.但问题是此界面中没 ...
- 微信订阅号里实现oauth授权登录，并获取用户信息 (完整篇)
摘要 这段时间一直有人问我,订阅号实现的oauth授权登录的问题,之前写的比较简单,很多人不明白.众所周知,微信公众号分订阅号.服务号.企业号:每个号的用途不一样,接口开放程度也不一样.微信还有个扯淡 ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
- AIX系统程序异常不释放光驱处理
AIX操作系统有时会出现程序异常不释放光驱,可以用以下命令进行处理: #fuser -kxuc /dev/cd0 或者 #fuser /dev/cd0 以上命令会列出访问光驱设备的所有进程,然后使用k ...
- angularjs发送delete请求传参数的方法
angularjs使用$http.delete()发送请求,默认是没法通过变量来传参数
- 手把手教你编写一个具有基本功能的shell（已开源）
刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...
- 编程实践中C语言的一些常见细节
对于C语言,不同的编译器采用了不同的实现,并且在不同平台上表现也不同.脱离具体环境探讨C的细节行为是没有意义的,以下是我所使用的环境,大部分内容都经过测试,且所有测试结果基于这个环境获得,为简化起见, ...
- SQL 基础：Select语句，各种join，union用法
一.基本的SELECT语句 1. “*”的注意事项:在SELECT语句中,用*来选取所有的列,这是一个应该抵制的习惯. 虽然节省了输入列名的时间,但是也意味着获得的数据比真正需要的数据多的多.相应的, ...
- VS2008中调试dll
1.运行dll实例时,会直接弹出一个小框: 选择可拉起这个dll的exe运行就可以调试了 2.以后每次都会直接运行了,要重新选择程序,弹出上面的框,需要在project-->debugging- ...