Javascript:DOM动态创建元素实例应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom:动态创建元素</title>
</head>
<body> <ul id="demo1"> </ul>
<input type="text" id="text1"/>
<input type="button" value="发布" id="btn"> <script type="text/javascript"> var oUl=document.getElementById('demo1');
var oText=document.getElementById('text1');
var oBtn=document.getElementById('btn'); /*innerHTML方法会使性能降低；动态创建性能更优*/ oBtn.onclick=function(){ /*
*创建元素
*语法:document.createElement(要创建的标签名);
*
*/ var oLi=document.createElement('li');
//此时，只是创建，并不会在dom树里显示 //oLi.innerHTML=oText.value+'<a href="javascript:">删除</a>';
//上述方法，性能较差，且不易操作 var oA=document.createElement('a');
oA.innerHTML='删除';
oA.href='javascript:;'; oA.onclick=function(){ //删除元素
//父级.removeChild(要删除的元素) oUl.removeChild(this.parentNode);
} oLi.innerHTML=oText.value;
oLi.appendChild(oA);
oText.value=''; /*
*将元素添加到页面中的方法:
*方法一: appendChild()
*功能：即在父元素的最后一个子节点之后追加子元素,
*语法：父元素.appendChild(要添加的元素)
*兼容性:在IE下，如果第二个参数的节点不存在会报错；其他标准浏览器下，如果第二个参数的节点不存在，则会以appendChild的形式添加
*.eg. oUl.appendChild();
*/ //oUl.appendChild(oLi); /*
*将元素添加到页面中的方法:
*方法二: insertBefore(新元素,被插入的已有元素)
*功能:在指定元素前面插入一个新元素
*语法：父元素.appendChild(要添加的元素)
*.eg. oUl.insertBefore(oLi,oUl.children[0]);
*/ //oUl.insertBefore(oLi,oUl.children[0]); //兼容性写法 if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
} } </script> </body>
</html>
演示地址：http://codepen.io/anon/pen/yNpgLp
Javascript:DOM动态创建元素实例应用的更多相关文章
- JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript dom 动态创建标记
此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
- js入门之DOM动态创建数据
一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...
- JavaScript获取和创建元素
1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById() =>通过元素ID获取文档中特定的元素,如获取 id = ...
- Dom 获取、Dom动态创建节点
一.Dom获取 1.全称:Document Object Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
随机推荐
- NYOJ 284 坦克大战 bfs + 优先队列
这类带权的边的图,直接广搜不行,要加上优先队列,这样得到的结果才是最优的,这样每次先找权值最小的,代码如下 #include <stdio.h> #include <iostream ...
- jdbc02
分层实现新闻管理系统 1.创建新闻信息实体类,jdbc配置文件以及工具类 public class News { // 新闻信息的实体类 private Integer id; //编号 privat ...
- 一条insert语句批量插入多条记录
一条insert语句批量插入多条记录 常见的insert语句,向数据库中,一条语句只能插入一条数据: insert into persons (id_p, lastname , firstName, ...
- SQL Server 2008将数据导出为脚本
之前我们要将一个表中的数据导出为脚本,那么只有在网上找一个导出数据的Script,然后运行就可以导出数据脚本了.现在在SQL Server 2008的Management Studio中增加了一个新特 ...
- ods_yx给用户分配表空间、权限用户等工作内容。
1.登陆运维审计 huang_cb.bl hac12345 2.找到81.35 root-admin nwsj*2013 3.打开oracle EMC工具,使用ods_yx用户登陆进EMC里面的 ...
- php魔法常量
有七个魔术常量它们的值随着它们在代码中的位置改变而改变.例如 __LINE__ 的值就依赖于它在脚本中所处的行来决定.这些特殊的常量不区分大小写,如下: 名称 说明 __LINE__ 文件中的当前行号 ...
- c++中 cin、cin.get()、cin.getline()、cin.getchar()的区别
①cin>>:无法接收空格.Tap键且以空格.Tap键.回车符为分隔符: ②cin.get( ):可以接收空格.Tap键且以回车符为结束符: 一:可输入单个字符 格式: char ch; ...
- 【转】Debug和Release区别
VC下Debug和Release区别 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步 ...
- IntelliJ IDEA 12 创建Web项目 教程 超详细版
IntelliJ IDEA 12 新版本发布 第一时间去官网看了下 黑色的主题 很给力 大体使用了下 对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走 ...
- Phpcms V9全站伪静态设置方法
为什么要伪静态?具体在这里就不说了,你懂的!一方面更新修改后不需要生成静态文件,另一方面为了SEO! 访问规则如下 1 2 list-{$catid}-{$page}.html content-{$c ...