<!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
时间： 2024-10-03 14:55:15