【无标题】JS操作DOM：生成、追加、插入、删除、替换、克隆

本文链接：https://blog.csdn.net/m0_61238657/article/details/122565563

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>js操作dom</title>

	<style type="text/css" >
		
		/*#hua2{width: 300px;}*/
	</style>
	<script type="text/javascript" >
		
		window.onload=function(){
			var hua=document.getElementById("hua");
			
			//生成一个div元素
			var long=document.createElement("div");
			console.log(hua,long);
			
			//在生成的元素上加入属性ID和CLASS和自定义属性
			long.id="longtwo";
			long.className="longsan";
			console.log(long);
			long.setAttribute("abc","hualala");
            
            //在生成的元素里面创建内容
			long.innerHTML="WO AI YITALI";
			
			//把创建完整的素插入其他元素内作为最后一个子元素
			hua.appendChild(long);//appendchild也适用选择到的现有的元素
			
			//创建新元素插入到max元素内的hua2元素之前
			var max=document.getElementById("max");
			var long2=document.createElement("div");
			var hua2=document.getElementById("hua2");
			long2.id=("long2");
			long2.innerHTML="哈喽，我插入到了hua2之前";
			
			max.insertBefore(long2,hua2);

			///注意插入元素的时候填入的两个参数均为变量名///
            /
            
           
            var btn=document.getElementById("btn");
            var ul=document.getElementById("ul");
            btn.onclick=function(){
            	var lixin=document.createElement("li");
            	lixin.innerHTML=ipt.value;
            	ul.insertBefore(lixin,ul.children[1]);
            	ipt.value="";
            };

            ///删除第二个子元素,参数也可以直接放id///
	        var ul=document.getElementById("ul");
			var allLi=document.getElementsByTagName("li");
	            ul.removeChild(allLi[1]); 
 
           //直接删除目标元素（ID）
           lith.remove()

           ///替换子元素，注意需要两个参数/
           var hua3=document.createElement("div");
		    	hua3.innerHTML="我是后来生成的";
		    	ul.replaceChild(hua3,allLi[1]);

		   

		};  
		    
		
	</script>
</head>
<body id="max">
	<div id="hua"></div>
	<div id="hua2">hua2</div>

	<input type="text" name="" id="ipt">
	<input type="button" name="" value="insert" id="btn">

	<ul id="ul">
		<li>aaaaaaaa</li>
		<li>bbbbbbbb</li>
		<li id="lith">cccccccc</li>
		<li>dddddddd</li>
		<li>kkkkkkkkkk</li>
		<div id="long5"></div>
	</ul>
	<script type="text/javascript">
		//为allLi添加一个克隆的子元素，不能添加到上面，否则cloneNode报错
		 var allLi=document.getElementsByTagName("li");
		       long5.appendChild(allLi[4].cloneNode(true));

	</script>
	
</body>
</html>