替换节点

replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中  

 练习:

替换节点_第1张图片

当单击”北京”这个节点时,北京这个节点被  ”反恐”替换


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>yuhan20081021</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>  
  <body>   
 您喜欢的城市:<br> 
  <ul>
  <li id="bj" value="beijing" >北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
  </ul>  
 您喜欢的游戏:<br> 
  <ul>
  <li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
  </ul>   
  </body>
  <script language="JavaScript">
      //点击北京节点, 将被反恐节点替换
 document.getElementById("bj").onclick=function(){
  var bjElement= document.getElementById("bj")
var fkElement= document.getElementById("fk");
//获取北京节点的父节点
var bjParentElement=bjElement.parentNode;
//替换
var oldElement=bjParentElement.replaceChild(fkElement,bjElement);
alert(oldElement.getAttribute("value"))
 }
  </script>  
</html>



你可能感兴趣的:(替换节点)