操作元素
创建节点的方法 document.createElement(“div”);//创建节点加入节点 parentNode.appendChild(childElement);//在父亲节点下，在最后一个孩子后加入节点 . parentNode.insertBefore(newNode,beforeNode);//在父亲节点下，在一个节点前加入节点删除节点的方法 parentNode.removeChild(childNode);//删除父节点的孩子节点 node.remove()//删除节点替换节点的方法 parentNode.replaceChild(newNode,oldNode)//替换节点 代码实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function addFileItem(){ //1.创建一个<tr> //1.1创建一个INPUT var fileInput=document.createElement("input"); fileInput.type="file"; fileInput.name="photo"; //1.2创建另一个input var buttonInput=document.createElement("input"); buttonInput.type="button"; buttonInput.value="删除"; buttonInput.onclick=delFileItem;//!!!! //1.3创建<td> var td1=document.createElement("td"); td1.innerHTML=" "; //1.4创建td2 var td2=document.createElement("td"); //1.5t<td><input></input></td> td2.appendChild(fileInput); td2.appendChild(buttonInput); //1.6 var newRow=document.createElement("tr"); newRow.appendChild(td1); newRow.appendChild(td2); //console.info(newRow); //2将创建的tr加入到指定位置 //2.1获取添加位置的行 var lastRow=document.getElementById("lastRow"); //2.2找到父亲节点 var pNode=lastRow.parentNode; //2.3添加到指定的位置 pNode.insertBefore(newRow,lastRow);//在节点前插入 //pNode.replaceChild(newRow,lastRow);//替代节点 } function delFileItem(){ var delRow=this.parentNode.parentNode; console.info(delRow); console.info(delRow.parentNode); delRow.remove();//.remove删除自己 .removeChild(a)删除孩子节点a //delRow.parentNode.removeChild(delRow); } </script> } </head> <body> <h2>用户注册</h2> <form method="get"> <table id="table1" border="1" width="40%"> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" value="请输入姓名"></td> </tr> <tr> <td>照片</td> <td> <input type="file" name="photo" id="photo"> <input type="button" value="添加" onclick="addFileItem()"/> </td> </tr> <tr> <td></td> <td> <input type="file" name="photo" id="photo"> <input type="button" value="删除" onclick="delFileItem()"/> </td> </tr> <tr id="lastRow"> <td colspan="2" align="center"> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html>```