document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> var num = 1; function add(){ var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。 //setAttribute:设置节点的属性 inputNode.setAttribute("type","button"); inputNode.setAttribute("value","按钮"+num); num++; var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(inputNode); //appendChild 添加子节点。 } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input type="button" onclick="add()" value="添加"/> </body> </html>插入目标元素的位置 elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。 注意： elt必须是oldNode的直接父节点。 elt.removeChild(child) 删除指定的子节点 注意： elt必须是child的直接父节点。
添加附件思想
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function addFile(){ //先要创建一个tr对象 var trNode = document.createElement("tr"); //创建td对象 var tdNode1 = document.createElement("td"); var tdNode2 = document.createElement("td"); // tdNode1.innerHTML ="<input type='file'/>"; tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>"; //把td的节点添加到tr节点上 trNode.appendChild(tdNode1); trNode.appendChild(tdNode2); var tbodyNode = document.getElementsByTagName("tbody")[0]; var lastRow = document.getElementById("lastRow"); tbodyNode.insertBefore(trNode,lastRow); } //删除附件 function delFile(aNode){ var trNode = aNode.parentNode.parentNode; var tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table> <tr> <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td> </tr> <tr id="lastRow"> <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td> </tr> </table> </body> </html>
