通过
添加元素：element.appendChild()
删除元素：element.removeChild()
创造元素：document.createElement()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer{
height: 200px;
width: 200px;
background-color: aqua;
}
#content{
height: 100px;
width: 100px;
background-color: bisque;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btndown=document.getElementById("butdown");
btndown.onclick=function(){
// 将content添加到divdown中
var content=document.getElementById("content");
var divdown=document.getElementById("divdown");
divdown.appendChild(content);
}
var butup=document.getElementById("butup");
butup.onclick=function(){
//将content添加到divup中
var content=document.getElementById("content");
var divup=document.getElementById("divup");
divup.appendChild(content);
}
var clean=document.getElementById("clean");
clean.onclick=function(){
//清除
var content=document.getElementById("content");
// 要删除一个元素，要先找到它的父节点，再删除
content.parentNode.removeChild(content);
}
var create=document.getElementById("create");
create.onclick=function(){
// 创造一个新的节点,函数的参数需要输入标签类型
var newElement=document.createElement("div");
//给元素添加属性
newElement.setAttribute("id","content");
document.getElementById("divup").appendChild(newElement);
}
}
</script>
</head>
<body>
<h1>通过添加一个已有元素到另外一个地方，移动效果</h1>
<div id="divup" class="outer">
<div id="content">
</div>
</div>
<button id="butup">向上箭头</button>
<button id="butdown">向下箭头</button>
<div id="divdown" class="outer">
</div>
</body>
</html>
对属性对象的操作：
element.className ：设置或返回元素的class属性
element.style ：设置或返回元素的样式属性
element.focus() ：设置文档或元素获取焦点
element.getAttribute()：返回指定元素的属性值
element.setAttribute()：设置或者改变指定属性并指定值。
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
