码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript:DOM动态创建元素实例应用

时间:2015-06-27 21:21:13      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

<!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动态创建元素实例应用

标签:

原文地址:http://www.cnblogs.com/kevinCoder/p/4604573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!