您的位置：首页 > Web前端 > JavaScript

JavaScript DOM编程学习笔记-替换节点

2016-02-04 11:04 686 查看

[code=php;toolbar:false"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//测试replaceChild()方法
var bjNode = document.getElementById("bj");
var xyjNode = document.getElementById("xyj");

var cityNode = document.getElementById("city");
//cityNode.replaceChild(xyjNode, bjNode);

//节点互换
var bookNode = document.getElementById("book");
/*
var bjNode2 = bjNode.cloneNode(true);//true表示可以克隆子节点
bookNode.replaceChild(bjNode2, xyjNode);
cityNode.replaceChild(xyjNode, bjNode)
*/
replaceEach(bjNode, xyjNode);
}

//自定义互换函数
function replaceEach(aNode, bNode){
//alert(1);
//1.获取aNode bNode的父节点
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;

if(aParent && bParent){
var aNode2 = aNode.cloneNode(true);
//cityNode.replaceChild(newChild, oldChild);
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>

<br />
<form action="#" name="myForm">
<input type="radio" name="type" value="city"/>城市
<input type="radio" name="type" value="book"/>BOOK
<input type="text" name="myName"/>
<input type="submit" value="submit" id="submit"/>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript DOM编程 学习笔记-替换节点

JavaScript DOM编程学习笔记-替换节点