javascript DOM(四)----节点替换
节点的替换:
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
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
