節點的替換:
1). replaceChild(): 把一個給定父元素裡的一個子節點替換為另外一個子節點
var reference = element.replaceChild(newChild,oldChild);
返回值是一個指向已被替換的那個子節點的引用指針
2). 該節點除瞭替換功能以外還有移動的功能.
3). 該方法隻能完成單向替換, 若需要使用雙向替換, 需要自定義函數:
/**
* 互換 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
if(aNode == bNode){
return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父節點
if(aParentNode){
var bParentNode = bNode.parentNode;
//若 bNode 有父節點
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}
}
Html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//1. 把 "東京" 節點替換為 "平壤"
var pr = document.createElement("li");
pr.appendChild(document.createTextNode("平壤"));
document.getElementById("city").replaceChild(pr, document.getElementById("dj"));
//2. 實現 #bj 和 #rl 之間的互換, 需要使用 cloneNode() 方法
var bj = document.getElementById("bj");
var rl = document.getElementById("rl");
//
// var city = document.getElementById("city");
// var game = document.getElementById("game");
//
// city.replaceChild(rl.cloneNode(true), bj);
// game.replaceChild(bj, rl);
replaceEach(rl, bj);
};
/**
* 互換節點
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
var aParentNode = aNode.parentNode;
var bParentNode = bNode.parentNode;
//若 aNode 和 bNode 都存在父節點
if(aParentNode && bParentNode){
aParentNode.replaceChild(bNode.cloneNode(true), aNode);
bParentNode.replaceChild(aNode, bNode);
}
}
</script>
</head>
<body>
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">東京</li>
<li>首爾</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
</body>
</html>
本文出自“change”