菜鸟看前端（JS操作DOM(创建，添加，删除，替换)）

最新推荐文章于 2024-05-05 19:55:36 发布

中庸之为德也，其至矣乎

最新推荐文章于 2024-05-05 19:55:36 发布

阅读量207

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/weixin_45891146/article/details/112850840

版权

JS操作DOM(创建，添加，删除，替换)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bootstrap.css" />
	</head>
	<body>
		
		<button type="button" class="but1 btn">点击尾部添加子元素</button>
		<button type="button" class="but2 btn">点击头部添加子元素</button>
		<button type="button" class="but3 btn">点击添加文本节点</button>
		<button type="button" class="but4 btn">删除body的子节点</button>
		<button type="button" class="but5 btn">替换box子节点</button>
		<div id="box">
			<p class="item">插入子节点</p>

		</div>
	</body>
	<script type="text/javascript">
		// 获取元素
		let but1 = document.querySelector('.but1')
		let but2 = document.querySelector('.but2')
		let but3 = document.querySelector('.but3')
		let but4 = document.querySelector('.but4')
		let but5 = document.querySelector('.but5')
		let box = document.querySelector('#box')
		let p1 = document.querySelector('.item')
		let body = document.body

		// 点击尾部添加子节点
		but1.onclick = function() {
			// 创建子节点
			let p = document.createElement('p')
			p.innerHTML = '尾部添加子节点'
			box.appendChild(p)
		}
		// 头部添加子节点
		but2.onclick = function() {
			// 创建子节点
			let p = document.createElement('p')
			p.innerHTML = '头部添加子节点'
			box.insertBefore(p, p1) // 第一个参数是要插入的节点，第二个参数是要插入的位置
		}

		// 添加文本节点
		but3.onclick = function() {
			// 创建一个文本节点
			let text = document.createTextNode('我是文本节点')
			let h = document.createElement('H1')
			h.appendChild(text)
			body.appendChild(h)
		}
		
		// 删除子节点
		but4.onclick = function(){
			body.removeChild(but1)
		}
		
		// 替换子节点
		but5.onclick = function(){
			let h = document.createElement('H3')
			h.innerHTML = '插入子节点'
			box.replaceChild(h,p1) // 第一个参数新节点，第二个参数旧节点
		}
		
	</script>
</html>