<!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动态创建元素实例应用的更多相关文章

  1. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  2. JavaScript dom 动态创建标记

    此前的大多数DOM都是用来查找元素,getElementById和getElementsByTagName都可以方便快捷的找到文档中的某个或者某些特定的元素节点,这些元素随后可以用诸如setAttri ...

  3. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  4. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  5. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

  6. js入门之DOM动态创建数据

    一. 知识点回顾 1. DOM结构 nodeName: '' 标签名 nodeType: '' 类型 1元素节点 2属性节点 3文本节点 nodeValue: '' 如果是元素节点 nodeValue ...

  7. JavaScript获取和创建元素

    1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById()  =>通过元素ID获取文档中特定的元素,如获取 id = ...

  8. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  9. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

随机推荐

  1. NYOJ-569最大公约数之和

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=569 此题目可以用筛选法的思想来做,但是用到一个欧拉函数 gcd(1,12)=1,gcd( ...

  2. 读取文件内容返回List<String>类型

    文件内容格式: string1 string2 String 3 …… 很简单,两句话 String content = new String(Files.readAllBytes(Paths.get ...

  3. 小学生之浅谈Struts2与struts1的运行机制

    Struts1工作原理图: 1.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控制器会读取配置文件(s ...

  4. JY01-KX-01

    复习: 1.a标签跳转 <p id="地址"></p> <a href="#地址"></a> 预习: 1.out ...

  5. C#网络编程之WebClient

    1.什么是WebClient? 源自MSDN:提供用于将数据发送到由 URI 标识的资源及从这样的资源接收数据的常用方法. 2.OpenRead()  为从具有String指定的URI的资源下载的数据 ...

  6. php中iconv函数的一个小bug--转载

    iconv转换字符集很好用,但是有时候你会发现iconv转换的时候会返回false或者空字符串,严格说来这算不上是iconv的问题,这其实是字符集的问题,但是实际编码中应该算是iconv的bug了. ...

  7. delphi列表视图组件(TListView)使用方法|实例

    TListView 组件以多种形式显示列表的项目,如详细资料.小图标.大图标等形式表示列表中的项目.    列表视图与用TListBox 组件实现的列表框非常相似.不同的是,列表视图可以让用户选择不同 ...

  8. 通过枚举enum实现单例设计

    一.枚举 通过enum关键字来实现枚举,在枚举中需要注意的有: 1. 枚举中的属性必须放在最前面,一般使用大写字母表示 2. 枚举中可以和java类一样定义方法 3. 枚举中的构造方法必须是私有的 通 ...

  9. js解决网页无法复制文字的问题

    碰到有些网站,站长禁止了右键,或者用其它方法不让复制网页的文字,弄的好烦人啊,虽然这是小把戏,但多多少少造成了一些不方便,前几天发现这个解决不能复制问题的小方法,一行代码即搞定,就是下面这行: jav ...

  10. 离线破win2003域账号密码(更新域数据库不在默认路径的情况)

    国内网站讲了许多方法,很多也讲得不清楚.我把我尝试成功的经验跟大家分享. 方法是按照tim的文章操作,链接如下: http://pauldotcom.com/2011/11/safely-dumpin ...