删除节点与插入节点 & innerHTML
1.测试removeChild()方法： 删除节点
dom9.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试removeChild()方法： 删除节点 window.onload = function() { /* alert("1"); var bjNode = document.getElementById("bj"); bjNode.parentNode.removeChild(bjNode); */ //为每个li添加一个confirm(确认对话框)：确定删除xx的信息吗，确定,则删除 // var falg = confirm("确定要删除吗?"); // alert(flag); var liNodes = document.getElementsByTagName("li"); for (var i = 0; i < liNodes.length; i++) { liNodes[i].onclick = function(){ var flag = confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？"); if (flag) { this.parentNode.removeChild(this); } } } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br> <br> name： <input type="text" name="username" id="name" value="xiaoxiaolin"> </body> </html>
2.练习
ex5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数: * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的 * 第一个 td 子节点的文本值, 且要去除前后空格. * 2. 若点击 "确认" , 则删除 a 节点的所在的 行 * * 注意: * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为 * 2. tr 的直接父节点为 tbody, 而不是 table * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. * * 为 #addEmpButton 添加 onclick 响应函数: * 1. 获取 #name, #email, #salary 的文本框的值 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td * 节点价位 tr 节点的子节点 <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> </tr> * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td> * 4. 把 3 创建的 td 也加为 tr 的子节点. * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点. * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. * */ window.onload = function(){ function removeTr(aNoe){ var trNode = aNoe.parentNode.parentNode; var textContent = trNode.getElementsByTagName("td")[0] .firstChild.nodeValue; textContent = trim(textContent); var flag = confirm("确定要删除" + textContent + "的信息吗?"); if(flag){ trNode.parentNode.removeChild(trNode); } return false; } var aNodes = document.getElementById("employeetable") .getElementsByTagName("a"); for(var i = 0; i < aNodes.length; i++){ aNodes[i].onclick = function(){ removeTr(this); return false; } } document.getElementById("addEmpButton").onclick = function(){ var nameVal = document.getElementById("name").value; var emailVal = document.getElementById("email").value; var salaryVal = document.getElementById("salary").value; var nameTd = document.createElement("td"); nameTd.appendChild(document.createTextNode(nameVal)); var emailTd = document.createElement("td"); emailTd.appendChild(document.createTextNode(emailVal)); var salaryTd = document.createElement("td"); salaryTd.appendChild(document.createTextNode(salaryVal)); var tr = document.createElement("tr"); tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd); alert("aa"); //<td><a href="deleteEmp?id=xxx">Delete</a></td> var aNode = document.createElement("a"); aNode.href = "deleteEmp?id=xxx"; aNode.appendChild(document.createTextNode("Delete")); var aTd = document.createElement("td"); aTd.appendChild(aNode); tr.appendChild(aTd); aNode.onclick = function(){ removeTr(this); return false; } document.getElementById("employeetable") .getElementsByTagName("tbody")[0] .appendChild(tr); //value: 用于获取 html 表单元素的值 //alert(this.value); // //nodeValue: 用于获取文本节点的文本值. //alert(this.nodeValue); //null } function trim(str){ var reg = /^\s*|\s*$/g; return str.replace(reg, ""); } } </script> </head> <body> <center> <br> <br> 添加新员工 <br> <br> name: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> salary: <input type="text" name="salary" id="salary" /> <br> <br> <button id="addEmpButton" value="abc">Submit</button> <br> <br> <hr> <br> <br> <table id="employeetable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td> Jerry </td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </tbody> </table> </center> </body> </html>
3 插入节点:
① insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
②自定义 insertAfter() 方法
demo10.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试 insertBefore() 插入节点 //该方法除了进行插入外, 还有移动节点的功能. window.onload = function(){ alert("abc"); //1. 把 #rl 插入到 #bj 节点的前面 var cityNode = document.getElementById("city"); var bjNode = document.getElementById("bj"); var rlNode = document.getElementById("rl"); //cityNode.insertBefore(rlNode, bjNode); //var refNode = document.getElementById("se"); var refNode = document.getElementById("dj"); insertAfter(rlNode, refNode); } //把 newNode 插入到 refNode 的后面 function insertAfter(newNode, refNode){ //1. 测试 refNode 是否为其父节点的最后一个子节点 var parentNode = refNode.parentNode; if(parentNode){ var lastNode = parentNode.lastChild; //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点. if(refNode == lastNode){ parentNode.appendChild(newNode); } //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟 //节点的前面. else{ var nextNode = refNode.nextSibling; parentNode.insertBefore(newNode, nextNode); } } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br><br> name: <input type="text" name="username" value="atguigu"/> </body> </html>
4.innerHTML属性:
浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分.
innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
<script type="text/javascript"> //测试 innerHTML 属性 window.onload = function(){ var cityNode = document.getElementById("city"); alert(cityNode.innerHTML); //互换 #city 节点和 #game 节点中的内容. var tempHTML = cityNode.innerHTML; var gameNode = document.getElementById("game"); cityNode.innerHTML = gameNode.innerHTML; gameNode.innerHTML = tempHTML; } </script>
All that work will definitely pay off
