<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ myClick("btn01",function(){ // alert("hello");//测试是否运行 /*---------------1.创建一个“广州”节点，添加到#city下--------------------*/ // 创建广州节点<li>广州</li> /*创建li元素节点 document.createElement() 可以用于创建一个元素节点对象， 它需要一个标签名作为参数，将会根据标签名创建元素节点对象， 并将创建好的对象作为返回值返回 */ var li=document.createElement("li"); // alert(li);//测试 /*创建广州文本节点 document.createTextNode() 可以用来创建一个文本节点对象 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 */ var gzText=document.createTextNode("广州"); // alert(gzText);//测试 // 将gzText设置的li的子节点 /* appendChild() -向一个父节点中添加一个新的子节点 -用法：父节点.appendChild(子节点)； */ li.appendChild(gzText); // 获取id为city的节点 var city=document.getElementById("city"); // 将广州添加到city下 city.appendChild(li); }); /*---------------2.将“广州”节点插入到#bj前面--------------------------*/ myClick("btn02",function(){ // 创建一个广州 var li=document.createElement("li"); var gzTest=document.createTextNode("广州"); li.appendChild(gzTest); // 获取id为bj的节点 var bj=document.getElementById("bj"); // 获取city var city=document.getElementById("city"); /* insertBefore() -可以在指定的子节点前插入新的子节点 -语法： 父节点.insertBefore(新节点，旧节点); */ city.insertBefore(li,bj); }); /*----------- 3.使用“广州”节点替换#bj节点-----------------------------*/ myClick("btn03",function(){ var li=document.createElement("li"); var gzTest=document.createTextNode("广州"); li.appendChild(gzTest); var bj=document.getElementById("bj"); var city=document.getElementById("city"); city.replaceChild(li,bj); /* replaceChild() -可以使用指定的子节点替换已有的子节点 -语法：父节点.replaceChild(新节点，旧节点); */ }); /*--------------- 4.删除#bj节点--------------------------------*/ myClick("btn04",function(){ var bj=document.getElementById("bj"); var city=document.getElementById("city") // city.removeChild(bj); bj.parentNode.removeChild(bj); /* removeChild() -可以删除一个子节点 -语法：父节点.removeChild(子节点); 子节点.parentNode.removeChild(子节点); */ }); /*------------- 5.读取#city内的HTML代码-------------*/ myClick("btn05",function(){ var city=document.getElementById("city"); console.log(city.innerHTML); }); /*---------------6.设置#bj内的HTML代码-------------*/ myClick("btn06", function () { var bj=document.getElementById("bj"); bj.innerHTML="昌平" }); /*---------------7.创建一个“广州”节点，添加到#city下--------------------*/ myClick("btn07", function () { var city=document.getElementById("city"); // city.innerHTML +="<li>广州</li>"; /* 使用innerHTML也可以完成DOM的增删改的相关操作 一般我们会两种方式结合使用 */ var li=document.createElement("li"); li.innerHTML="广州"; city.appendChild(li); }); }; function myClick(idStr,fun){ var btn=document.getElementById(idStr); btn.onclick=fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市？ </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>首尔</li> <li>东京</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个“广州”节点，添加到#city下</button></div> <div><button id="btn02">将“广州”节点插入到#bj前面</button></div> <div><button id="btn03">使用“广州”节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">设置#bj内的HTML代码</button></div> </div> </body> </html>