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

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

undefined001

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

阅读量304

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/undefined001/article/details/39523517

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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>

undefined001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于DOM的那点事之创建、追加、删除

DOM 第一个第二个第三个第四个 var oLi=document.createElement('li'); var oUl1=document.getElementById('ul1'); oUl1.appendChild(oLi); var oText=document.cr
复制链接

扫一扫

专栏目录