本期实现功能
增新一个子节点(appendChild)
将新的子节点添加到指定节点
window.onload = function(){ document.getElementById('bt1').onclick = function(){ //创建一个li节点 var addli1 = document.createElement('li'); //创建一个城市文本节点 var citytext = document.createTextNode('浙江'); //将文本节点设置为li节点的字节点 addli1.appendChild(citytext); //获取ul var ul = document.getElementById('uls'); //将li设置为ul的子节点 ul.appendChild(addli1); } }
在指定的子节点前添加一个新节点(insertBefore)
语法：
父节点.insertBefore(新节点,指定节点);
window.onload = function(){ document.getElementById('bt2').onclick = function(){ //创建一个li节点 var addli2 = document.createElement('li'); //创建一个文本节点 var citytext = document.createTextNode('四川'); //将文本节点设置为li的子节点 addli2.appendChild(citytext); //获取贵阳的li节点 var guiyang = document.getElementById('guiyang'); //获取ul节点 var ul = document.getElementById('uls'); //在贵阳之前插入li ul.insertBefore(addli2,guiyang); } }
替换子节点(replaceChild)
语法：
父节点.replaceChild(新节点,旧节点);
window.onload = function(){ document.getElementById('bt3').onclick = function(){ //创建一个li节点 var addli2 = document.createElement('li'); //创建一个文本节点 var citytext = document.createTextNode('江西'); //将文本节点设置为li的子节点 addli2.appendChild(citytext); //获取贵阳的li节点 var guiyang = document.getElementById('guiyang'); //获取ul节点 var ul = document.getElementById('uls'); //替换贵阳子节点 ul.replaceChild(addli2,guiyang); } }
删除指定节点(removeChild)
语法：
父节点.removeChild(子节点);
window.onload = function(){ document.getElementById('bt4').onclick = function(){ //找到天津这个节点 var tj = document.getElementById('tj'); //获取它的父节点 var parent =document.getElementById('uls'); //删除 parent.removeChild(tj); } }
优化：与innerHTML结合使用修改元素（更高效）
window.onload = function(){ document.getElementById('bt5').onclick = function(){ //创建一个li节点 var li = document.createElement('li'); //使用innerHTML写入文本 li.innerHTML="江苏"; //获取父节点 var ul = document.getElementById('uls') //将设置为ul的子节点 ul.appendChild(li); } }
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ document.getElementById('bt1').onclick = function(){ //创建一个li节点 var addli1 = document.createElement('li'); //创建一个城市文本节点 var citytext = document.createTextNode('浙江'); //将文本节点设置为li节点的字节点 addli1.appendChild(citytext); //获取ul var ul = document.getElementById('uls'); //将li设置为ul的子节点 ul.appendChild(addli1); } document.getElementById('bt2').onclick = function(){ //创建一个li节点 var addli2 = document.createElement('li'); //创建一个文本节点 var citytext = document.createTextNode('四川'); //将文本节点设置为li的子节点 addli2.appendChild(citytext); //获取贵阳的li节点 var guiyang = document.getElementById('guiyang'); //获取ul节点 var ul = document.getElementById('uls'); //在贵阳之前插入li ul.insertBefore(addli2,guiyang); } document.getElementById('bt3').onclick = function(){ //创建一个li节点 var addli2 = document.createElement('li'); //创建一个文本节点 var citytext = document.createTextNode('江西'); //将文本节点设置为li的子节点 addli2.appendChild(citytext); //获取贵阳的li节点 var guiyang = document.getElementById('guiyang'); //获取ul节点 var ul = document.getElementById('uls'); //替换贵阳子节点 ul.replaceChild(addli2,guiyang); } document.getElementById('bt4').onclick = function(){ //找到天津这个节点 var tj = document.getElementById('tj'); //获取它的父节点 // var parent =document.getElementById('uls'); // //删除 // parent.removeChild(tj); //另外一种方法 tj.parentNode.removeChild(tj); } document.getElementById('bt5').onclick = function(){ //创建一个li节点 var li = document.createElement('li'); //使用innerHTML写入文本 li.innerHTML="江苏"; //获取父节点 var ul = document.getElementById('uls') //将设置为ul的子节点 ul.appendChild(li); } } </script> <style> .box{ display: inline-block; background-color: lightblue; } li{ display: inline-block; background-color: lightgoldenrodyellow; margin: 10px; } .box2{ display: inline-block; } button{ display: block; } </style> </head> <body> <div class="box"> <p>常驻城市：</p> <ul id="uls"> <li id="tj">天津</li> <li id="guiyang">贵阳</li> <li>重庆</li> <li>北京</li> </ul> </div> <div class="box2"> <button id="bt1">添加一座城市</button> <button id="bt2">在贵阳这个城市之前加入一座城市</button> <button id="bt3">加一个新的城市替换贵阳</button> <button id="bt4">删除天津</button> <button id="bt5">使用innerHTML修改</button> </div> </body> </html>
