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

时间：2023-03-09 19:09:34
DOM操作（二）对元素的操作（创建，追加，删除）

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>

相关文章