dom对元素的增删改查

通过
添加元素: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():设置或者改变指定属性并指定值。

你可能感兴趣的:(js,javascript,前端,html)