/**
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
插入元素
insertBefore(节点,原有节点) 在已有元素前插入
删除DOM元素
removeChild(节点) 删除一个节点
文档碎片
文档碎片可以提高DOM操作性能(理论上)
document.createDocumentFragment()
父级.appendChild(子节点)
父级.insertBefore(子节点,xx前)
*/
HTML文件
<html>
<head>
<title>domOperate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/domOperate.js"></script>
</head>
<body>
<input type="text" id="txt">
<input type="button" value="CreateLi" id="btn">
<ul></ul>
<ul>
<li>1<a href="javaScript:;">remove</a></li>
<li>2<a href="javaScript:;">remove</a></li>
<li>3<a href="javaScript:;">remove</a></li>
<li>4<a href="javaScript:;">remove</a></li>
<li>5<a href="javaScript:;">remove</a></li>
<li>6<a href="javaScript:;">remove</a></li>
<li>7<a href="javaScript:;">remove</a></li>
<li>8<a href="javaScript:;">remove</a></li>
</ul>
<ul></ul>
</body>
</html>
js文件
window.οnlοad=function(){
var btn = document.getElementById('btn');
var ul1 = document.getElementsByTagName('ul')[0];
//元素删除
var ul2 = document.getElementsByTagName('ul')[1];
var aa = document.getElementsByTagName('a');
for(var i = 0;i< aa.length;i++){
aa[i].onclick = function(){
ul2.removeChild(this.parentNode);
}
}
//添加元素
var ali = ul1.getElementsByTagName('li');
var txt = document.getElementById('txt');
btn.onclick = function(){
var li = document.createElement('li');
//父级.appendChild(子节点);
li.innerHTML= txt.value;
//ul.appendChild(li);//会插入到最后面
//ul.insertBefore(li,ali[0]);
if(ali.length> 0){
ul1.insertBefore(li,ali[0]);
}else{
ul1.appendChild(li);
}
txt.value = '';
}
//文档碎片
var ul3 = document.getElementsByTagName('ul')[2];
var frag = document.createDocumentFragment();
for(var i = 0;i< 10;i++){
var oli = document.createElement('li');
oli.innerHTML = i+1+'element';
frag.appendChild(oli);
}
ul3.appendChild(frag);
}
5105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
