操作HTLML的文档结构，就是通过js动态的添加，删除标签，标签属性，标签绑定事件···

js操作HTML文档结构-innerHTML

  • 元素对象.innerHTML=div.innerHTML+”内容”—-增加节点
  • 元素对象.innerHTML=””—-删除所有子节点
  • 父节点.removeChild(子节点对象)—-删除指定的子节点。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <html>
    	<head>
    		<title>js操作元素的文档结构</title>
    		<meta charset="UTF-8"/>
    		<!--声明js代码域-->
    		<script type="text/javascript">
    			function testAdd(){
    				//获取元素对象
    				var showdiv=document.getElementById("showdiv");
    				//给div追加上传按钮
    				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' onclick='delInp(this)'/></div>";					
    			}
    			function delInp(btn){
    				//获取父级div
    				var showdiv=document.getElementById("showdiv");
    				//获取要删除的子div
    				var cdiv=btn.parentNode;
    				//父div删除子div
    				showdiv.removeChild(cdiv);
    			}
    		</script>
    	</head>
    	<body>
    		<h3>js操作元素的文档结构</h3>
    		<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
    		<hr />
    		<div id="showdiv">
    		</div>
    	</body>
    </html>

    js操作HTML文档结构-document.createElement(“标签名”)

  • var obj=document.createElement(“标签名”);—-创建标签
  • 元素对象名.appendChild(obj);—-添加标签
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>js操作文档结构2</title>
    		<!--
    			js操作文档结构2：
    				获取元素对象
    					var obj=document.createElement("标签名");
    					元素对象名.appendChild(obj);
    		-->
    		<!--声明js代码域-->
    		<script type="text/javascript">
    			function testOper2(){
    				//获取元素对象
    				var  showdiv=document.getElementById("showdiv");
    				//创建input元素对象
    				var inp=document.createElement("input");
    				inp.type="file";
    				//创建按钮元素对象
    				var btn=document.createElement("input");
    				btn.type="button";
    				btn.value="删除";
    				btn.onclick=function(){
    					showdiv.removeChild(inp);
    					showdiv.removeChild(btn);
    					showdiv.removeChild(br);
    				}
    				//创建换行符
    				var br=document.createElement("br");
    				//将创建的元素对象存放到div中
    				showdiv.appendChild(inp);
    				showdiv.appendChild(btn);
    				showdiv.appendChild(br);	
    			}
    		</script>
    	</head>
    	<body>
    		<h3>js操作文档结构2</h3>
    		<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
    		<hr />
    		<div id="showdiv">
    			
    		</div>
    	</body>
    </html>