js 通过innerHTML写入内容操作元素的文档节点

青旅半醒 2021-07-25 02:07 443阅读 0赞

操作元素文档结构
    
    	通过innerHTML
    		**增加节点**
    			innerHTML+=innerHTML+"节点标签"
    				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' onclick='t2(this)'/></div>"
    
    		**删除节点**
    		
    			删除所有子节点
    				父节点.innerHTML="";
    				
    			删除一个节点
    				父节点.removeChild(子节点对象);
    				通过父级元素删除子节点,将删除元素放在子div，通过父div删除子div实现删除
    			
    					onclick='t2(this)'
    						function t2(btn)
    					{
    						/*获取父div*/
    						var showdiv=document.getElementById("showdiv");
    						/*获取子div*/
    						var cdiv=btn.parentNode;
    						/*父div删除子div*/
    						showdiv.removeChild(cdiv);
    					}

代码示例：

<html>
    	<head>
    		<title>js 操作元素的文档结构1</title>
    		<meta charset="utf-8"/>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				var showdiv=document.getElementById("showdiv");
    				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' οnclick='t2(this)'/></div>"
    			}
    			
    			function t2(btn)
    			{ 
    				/*获取父div*/
    				var showdiv=document.getElementById("showdiv");
    				/*获取子div*/
    				var cdiv=btn.parentNode;
    				/*父div删除子div*/
    				showdiv.removeChild(cdiv);
    			}
    			
    		</script>
    	</head>
    	<body>
    		<input type="button" name="" id="" value="继续上传" onclick="t1()" />
    		<hr />
    		<div id="showdiv">
    
    		
    		
    		</div>
    		
    	</body>
    </html>