关于DOM的那点事之创建、追加、删除

最新推荐文章于 2022-07-18 09:33:34 发布

原创最新推荐文章于 2022-07-18 09:33:34 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个具体的HTML页面示例，详细介绍了如何使用DOM方法来创建、插入、删除和修改页面元素，包括使用JavaScript进行DOM元素的动态管理。此外，还展示了如何通过事件监听为页面元素添加交互。

<!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).onclick=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>