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

时间：2022-09-07 18:05:01
<!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

相关文章