js 通过创建对象操作文档节点

男娘i 2021-07-24 12:53 449阅读 0赞

**创建父元素子对象**
    	document.createElement("标签名");
    	元素对象名.属性="xx";  添加元素属性
    			var inp=document.createElement("input");
    			inp.type="file";
    			
    **将子对象添加到父元素中**
    	父元素对象.appendChild(子元素对象);
    			showdiv.appendChild(inp);
    			
    **删除父元素的子对象**
    	父元素对象.removeChild(子元素对象名);
    			showdiv.removeChild(inp);
    			
    **除了通过创建对象.添加属性和内容外，还可通过以下方式**
    		添加文本内容
    			var  text= document.createTextNode("添加内容");
    			创建对象.appendChild(text)
    			
    		添加html标签属性节点
    			var sty=document.createAttribute("固有标签名");
    			sty.value="标签赋值";
    			对象名.setAttributeNode(sty);
    			
    			操作css属性
    			
    			var sty=document.createAttribute("style");
    			sty.value="属性名:值";
    			对象名.setAttributeNode(sty);

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>js 操作文档结构2</title>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				var showdiv=document.getElementById("showdiv");
    				/*创建html对象*/
    				var inp=document.createElement("input");
    				inp.type="file";
    				var inp2=document.createElement("input");
    				inp2.type="button";
    				inp2.value="删除";
    				var br=document.createElement("br");
    				
    				/*将创建的元素对象存放到div中*/
    				showdiv.appendChild(inp);
    				showdiv.appendChild(inp2);
    				showdiv.appendChild(br);
    				
    				/*删除子对象*/
    				inp2.onclick=function(){ 
    					showdiv.removeChild(inp);
    					showdiv.removeChild(inp2);
    					showdiv.removeChild(br);
    				}
    				
    			}
    			
    		</script>
    	</head>
    	<body>
    		<h3>js 操作文档结构2</h3>
    		<input type="button" name="" id="" value="继续上传" onclick="t1()"/>
    		<hr />
    		<div id="showdiv">
    			
    		</div>
    	</body>
    </html>