DOM操作（二）对元素的操作（创建，追加，删除）

最新推荐文章于 2022-05-05 10:16:00 发布

weixin_34221112

最新推荐文章于 2022-05-05 10:16:00 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hzhjxx/p/9700461.html

本文详细介绍了如何使用JavaScript操作HTML文档中的元素，包括创建、添加、移除及替换元素的方法。通过实例演示了如何创建新的HTML元素，将其添加到文档中特定位置，以及如何移除和替换现有元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 创建新的 HTML 元素 (节点)

　　var divDom=document.createElement('div');

2 添加新元素到尾部

　　element.appendChild(para);

将新元素添加到开始位置

　　 para.insertBefore(element,element);

3 移除已存在的元素

　　要移除一个元素，你需要知道该元素的父元素

　　parent.removeChild(child);

4 替换 HTML 元素 - replaceChild()

示例：创建删除元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建删除元素</title>
<style>
	#box div{border: 1px solid #ddd;}
</style>
</head>
<body>
<div id="box">
	<p id="p1">原来的元素1</p>
	<p id="p2">原来的元素2</p>
</div>	
	
<script>
var box=document.getElementById('box');
var p1=document.getElementById('p1');
var p2=document.getElementById('p2');	
	
//创建元素
var div1=document.createElement('div');
div1.innerHTML='新添加元素1';
div1.style.color='red';
div1.onclick=function(){
	alert();
}

//追加新元素到尾部
box.appendChild(div1);

//将新元素添加到开始位置
var div2=document.createElement('div');
div2.innerHTML='新添加元素2';
box.insertBefore(div2,p1);
	
//删除元素
box.removeChild(p2);

</script>

</body>
</html>

转载于:https://www.cnblogs.com/hzhjxx/p/9700461.html