dom对元素的增删改查

最新推荐文章于 2023-03-30 10:52:21 发布

aqzengkuasheng

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量92

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122959427

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了如何使用JavaScript通过appendChild(), removeChild(), createElement()操作DOM，实现元素的添加、删除和创建，并展示了在div元素间移动内容的实例。

摘要由CSDN通过智能技术生成

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