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

第一种:

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. 0036 Java学习笔记-多线程-创建线程的三种方式

    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...

  3. 仿联想商城laravel实战---5、无刷新的增删改查(动态页面更新的三种方式(html))

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

  4. JavaWeb_(Struts2框架)Struts创建Action的三种方式

    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...

  5. spring创建bean的三种方式

    spring创建bean的三种方式: 1通过构造方法创建bean(最常用) 1.1 spring默认会通过无参构造方法来创建bean,如果xml文件是这样配置,则实体类中必须要有无参构造方法,无参构造 ...

  6. Java并发编程:Java创建线程的三种方式

    目录 引言 创建线程的三种方式 一.继承Thread类 二.实现Runnable接口 三.使用Callable和Future创建线程 三种方式的对比 引言 在日常开发工作中,多线程开发可以说是必备技能 ...

  7. java创建线程的三种方式及其对比

    第一种方法:继承Thread类,重写run()方法,run()方法代表线程要执行的任务.第二种方法:实现Runnable接口,重写run()方法,run()方法代表线程要执行的任务.第三种方法:实现c ...

  8. AJPFX总结java创建线程的三种方式及其对比

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...

  9. java创建线程的三种方式及其对照

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类.并重写该类的run方法,该run方法的方法体就代表了线程要完毕的任务.因此把run()方法称为运行 ...

随机推荐

  1. Selenium

    Selenium可以抓取完整的页面的html但是request 和java的url不能抓的很完整. selenium的方法是dirver.page_source

  2. Raising Modulo Numbers

    Description People are different. Some secretly read magazines full of interesting girls' pictures, ...

  3. power

    http://software.intel.com/en-us/articles/power-efficiency-analysis-and-sw-development-recommendation ...

  4. Flex数据交互之WebService

    In this article you will learn how to call webservices hosted on asp.net applications from flex. Fir ...

  5. MyBatis学习总结(三)——优化MyBatis配置文件中的配置

    一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: <?xml version="1 ...

  6. 5.Makefile的原理及应用

    1.概念 目标:目标顶格写,后面是冒号(冒号后面是依赖) 依赖:依赖是用来产生目标的原材料. 命令:命令前面一定是两个Tab,不能是定格,也不能说多个空格.命令就是要生成那个目标需要做的动作. 2.基 ...

  7. Address already in use的解决方法

    当客户端保持着与服务器端的连接,这时服务器端断开,再开启服务器时会出现: Address already in usr. 可以用netstat -anp | more 可以看到客户端还保持着与服务器的 ...

  8. 自定义控件TextView

    public class defineTextView extends TextView { Context context; public defineTextView(Context contex ...

  9. [华清远见]FPGA公益培训

    本套视频教程为华清远见 网络公益培训活动,主讲人:姚远老师,华清远见高级讲师. ------------------------------------------------------------ ...

  10. VC MFC在CMFCToolBar工具栏中加入组合框

    如何在CMFCToolBar工具栏中加入组合框等控件,且先看在线MSDN上怎么说的: 要增加一个组合框,需要完成以下步骤: 1.在工具栏资源中,增加一个对应ID资源号的按钮. 2.在主框架(mainf ...