<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
</head>
<body>
<ul id="ul1">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
</html>
<script>
var oLi=document.createElement('li');
var oUl1=document.getElementById('ul1');
oUl1.appendChild(oLi);
var oText=document.createTextNode('第五个Li,是DOM创建的');
oLi.appendChild(oText);
oText.nodeValue+='我是修改之后文字内容'
//innerHTML
oLi.innerHTML='我是用innerHTML添加的<a href="#">吕红红</a>';
oLi.id='';
oLi.style.backgroundColor='#ccc'
var oLis=document.getElementById('ul1').getElementsByTagName('li');
for(var i=0;i<oLis.length;i++){
// oLis.item(i).οnclick=function(){alert('li')}
}
oUl1.insertBefore(oLi,oLis.item(3));
//appendChild,insertBefore 新元素是添加,老元素是移动
oUl1.appendChild(oLis.item(0));
oUl1.insertBefore(oLis.item(4),oLis.item(3));
oUl1.removeChild(oLis.item(0));
/*for(var i=0;i<oLis.length;i++){
oUl1.removeChild(oLis.item(i));//有删不掉的
}*/
while(oLis.length){
oUl1.removeChild(oLis.item(0));
}
</script>
关于DOM的那点事之创建、追加、删除
最新推荐文章于 2022-07-18 09:33:34 发布