超链接功能：
可以被点击：样式
点击后台跳转到href指定的url
需求：保留1功能，去掉2功能
href=javascript:void(0);
Node结点对象，其他5个的父对象
特点：所有DOM对象都可以被认为是一个结点
方法： CRUD dom
appendChild()：向结点的子节点列表的结尾添加新的子节点
removeChild()：删除（并返回）当前结点的制定子节点
replaceChild()：用新节点替换一个子节点
属性：
parentNode 返回节点的父节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 1px solid red; } #div1{ width: 200px; height: 200px; } #div2{ width: 100px; height: 100px; } #div3{ width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <script> var element_a = document.getElementById("del"); element_a.onclick = function () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } var element_add = document.getElementById("add"); element_add.onclick = function () { var div1 = document.getElementById("div1"); var div3 = document.createElement("div"); div3.setAttribute("id","div3") div1.appendChild(div3) } </script> </body> </html>
案例4_动态表格_添加
分析：
给添加按钮绑定单击事件
获取文本框的内容
创建td，设置td的文本为文本框的内容
创建tr。
将td添加到tr中
获取table，将tr添加到table中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>是的</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>2</td> <td>小红</td> <td>女</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>3</td> <td>张三</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <script> document.getElementById("btn_add").onclick = function () { var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; var td_id = document.createElement("td"); var text_id = document.createTextNode(id) td_id.appendChild(text_id); var td_name = document.createElement("td"); var text_name = document.createTextNode(name) td_name.appendChild(text_name); var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender) td_gender.appendChild(text_gender); var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); var table = document.getElementsByTagName("table")[0]; table.appendChild(tr) } </script> </body> </html>
