您的位置：首页 > 移动开发

碎碎念：一个小例子来记忆下XML DOM的appendChild和removeChild的使用

2010-10-20 14:46 459 查看

最近使用notepad写HTML，结果document拼错了，导致一开始写对的东西擦掉重写，差点误解了removeChild的作用，这个也搞定了jQuery里文档操作的几个方法warp时的技巧问题了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>文档</title>
</head>
<mce:style type="text/css"><!--
#panel1,#panel2 {
width:500px;
height:500px;
float:left;
border:1px solid #000;
}
.t {
height:30px;
width:30px;
margin:2px;
float:left;
}
#div1    {
background-color:red;
}
#div2    {
background-color:orange;
}
#div3    {
background-color:yellow;
}
#div4    {
background-color:blue;
}
#div5    {
background-color:green;
}
#div6    {
background-color:gary;
}
#div7    {
background-color:black;
}
#div8    {
background-color:#eee;
}
#div9    {
background-color:#ccc;
}
#div10    {
background-color:#ddd;
}
--></mce:style><style type="text/css" mce_bogus="1">#panel1,#panel2 {
width:500px;
height:500px;
float:left;
border:1px solid #000;
}
.t {
height:30px;
width:30px;
margin:2px;
float:left;
}
#div1    {
background-color:red;
}
#div2    {
background-color:orange;
}
#div3    {
background-color:yellow;
}
#div4    {
background-color:blue;
}
#div5    {
background-color:green;
}
#div6    {
background-color:gary;
}
#div7    {
background-color:black;
}
#div8    {
background-color:#eee;
}
#div9    {
background-color:#ccc;
}
#div10    {
background-color:#ddd;
}</style>
<mce:script type="text/javascript"><!--
window.onload = function() {
document.getElementById("pop").onclick = function() {
var cols = document.getElementById("panel1").getElementsByTagName("div");
if(!!cols.length) {
var tmp = cols[0];

tmp = document.getElementById("panel1").removeChild(tmp);
document.getElementById("panel2").appendChild(tmp);
}
};

document.getElementById("push").onclick = function() {
var cols = document.getElementById("panel2").getElementsByTagName("div");
if(!!cols.length) {
var tmp = cols[0];

tmp = document.getElementById("panel2").removeChild(tmp);
document.getElementById("panel1").appendChild(tmp);
}
};
};
// --></mce:script>
<body>
<input type="button" id="pop" value="pop" />
<input type="button" id="push" value="push" />
<div id="panel1">
<div class="t" id="div1"></div>
<div class="t" id="div2"></div>
<div class="t" id="div3"></div>
<div class="t" id="div4"></div>
<div class="t" id="div5"></div>
<div class="t" id="div6"></div>
<div class="t" id="div7"></div>
<div class="t" id="div8"></div>
<div class="t" id="div9"></div>
<div class="t" id="div10"></div>
</div>
<div id="panel2">
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航