<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <div></div> </div> <table id="t1"> <tr> <td><a></a></td> <td><a href="javascript:void(0);" id="a1">百度一下</a></td> <td><a>我是下一个兄弟节点的a标签</a></td> </tr> <tr> <td><a></a></td> <td><a></a></td> <td><a></a></td> </tr> </table> <input type="button" id="fjd" value="获取父节点" /> <input type="button" id="xdjd" value="获取下一兄弟节点" /> <input type="button" id="zjd" value="获取所有子节点" /> <input type="button" id="add_node" value="添加节点" /> <input type="button" id="del_node" value="删除节点" /> <div id="result"></div> <div id="add" style=" 300px; height: 300px;border: solid 2px #0000FF;"></div> <ol id = "ol"> <li>苹果</li> <li>香蕉</li> </ol> </body> <script type="text/javascript"> var a1 = document.getElementById("a1"); var result = document.getElementById("result"); var fjd = document.getElementById("fjd"); var xdjd = document.getElementById("xdjd"); var zjd = document.getElementById("zjd"); var add_node = document.getElementById("add_node"); var del_node = document.getElementById("del_node"); fjd.onclick = function(){ /* 获取父节点 */ var parent = a1.parentNode; result.innerHTML = parent.nodeName; } xdjd.onclick = function(){ var parent = a1.parentNode; /* 获取下一个兄弟节点 */ /* IE678中用nextSibling IE9+、火狐、谷歌用nextElementSibling*/ result.innerHTML = parent.nextElementSibling.innerText; } zjd.onclick = function(){ var t1 = document.getElementById("t1"); /* 只取html标签的子元素，会忽略空格和回车 */ var nodes = t1.children; alert(nodes.length); for(var i=0;i<nodes.length;i++){ alert(nodes[i]); } } add_node.onclick = function(){ var newNode = document.createElement("div"); newNode.innerHTML = "我是新添加的div"; newNode.style = "200px;height:200px;backgroundColor:#7FFF00"; /* 将新节点插入到对应的位置 */ /* 方式一：插入到最后一个子结点的 */ /* var add = document.getElementById("add"); add.appendChild(newNode); */ /* 插入到参考节点之前 */ var ol = document.getElementById("ol"); var node = ol.childNodes[2]; alert(node.innerText); ol.insertBefore(newNode,node); } del_node.onclick = function(){ /* 想要删除某个节点必须先获取到它 */ var ol = document.getElementById("ol"); var del_node = ol.firstElementChild;//苹果 ol.removeChild(del_node); } </script> </html>