【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())

创建新的 HTML 元素 (节点) - appendChild()

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
		<p id="demo">原始节点</p>
		<button id="add">添加新节点</button>
		</div>
	</body>
	<script>
	document.getElementById("add").addEventListener('click',add);
	function add(){
		var para = document.createElement('p');
		para.className ="p1";//让新增的每个p节点的class名为"p1"
		var content = document.createTextNode("新的一条节点");
		para.appendChild(content);
		var element = document.getElementById("div1");
		element.appendChild(para);
	}
	</script>
</html>

实例解析：
以下代码是用于创建 <p> 元素:

var para = document.createElement('p');

为 <p> 元素创建一个新的文本节点：

var content = document.createTextNode("新的一条节点");

将文本节点添加到 <p> 元素中：

para.appendChild(content);

最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

运行截图：
在这里插入图片描述

创建新的 HTML 元素 (节点) - insertBefore()

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
		<p id="demo">原始节点</p>
		<button id="add">添加新节点</button>
		</div>
	</body>
	<script>
	document.getElementById("add").addEventListener('click',add);
	function add(){
		var para = document.createElement('p');
		para.className ="p1";//让新增的每个p节点的class名为"p1"
		var content = document.createTextNode("新的一条节点");
		para.appendChild(content);
		var element = document.getElementById("div1");
		element.insertBefore(para,demo);
	}
	</script>
</html>

实例解析：

		element.insertBefore(para,demo);

在id为demo标签前面插上para节点。

运行截图：
在这里插入图片描述

移除已存在的元素

在前面代码的基础上再添加移除代码
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
		<p id="demo">原始节点</p>
		<button id="add">添加新节点</button>
		<button id="del">移除新节点</button>
		</div>
	</body>
	<script>
	document.getElementById("add").addEventListener('click',add);
	document.getElementById("del").addEventListener('click',del);
	var count = -1;
	function add(){
		var para = document.createElement('p');
		para.className ="p1";//让新增的每个p节点的class名为"p1"
		var content = document.createTextNode("新的一条节点");
		para.appendChild(content);
		var element = document.getElementById("div1");
		count++;
		element.appendChild(para);
	}
	function del(){
		var parent = document.getElementById("div1");
		var child = document.getElementsByClassName("p1")[0];
		if(document.getElementsByClassName('p1')[0]==null){
			alert('已经移除完了');
			return 0;
		}
			parent.removeChild(child);
			count -= 1;
	}
	</script>
</html>

移除函数：

function del(){
		var parent = document.getElementById("div1");
		var child = document.getElementsByClassName("p1")[0];
		if(document.getElementsByClassName('p1')[0]==null){
			return 0;
		}
			parent.removeChild(child);
			count -= 1;
	}

实例解析：
查找 id="div1" 的元素:

var parent = document.getElementById("div1");

查找第一条class="p1" 的 <p> 元素:

var child = document.getElementById("p1")[0];

从父元素中移除子节点（每个class="p1"标签的第一个子节点）：

parent.removeChild(child);

判断是否移除完毕，若移除完毕则退出函数：

document.getElementsByClassName('p1')[0]==null

运行截图：
在这里插入图片描述

替换 HTML 元素 - replaceChild()

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
		<p id="demo">原始节点</p>
		<button id="add">添加新节点</button>
		<button id="del">移除新节点</button>
		<button id="rep">替换修改新节点</button>
		</div>
	</body>
	<script>
	document.getElementById("add").addEventListener('click',add);
	document.getElementById("del").addEventListener('click',del);
	document.getElementById("rep").addEventListener('click',rep);
	var count = -1;
	var count1 = 0;
	function add(){
		var para = document.createElement('p');
		para.className ="p1";//让新增的每个p节点的class名为"p1"
		var content = document.createTextNode("新的一条节点");
		para.appendChild(content);
		var element = document.getElementById("div1");
		count++;
		element.appendChild(para);
	}
	function del(){
		var parent = document.getElementById("div1");
		var child = document.getElementsByClassName("p1")[0];
		if(document.getElementsByClassName('p1')[0]==null){
			alert('已经移除完了');
			return 0;
		}
			parent.removeChild(child);
			count -= 1;
			count1 -= 1;
	}
	function rep(){
		if(count>-1){
			var para = document.createElement("p");
			para.className="p1";
			var node = document.createTextNode("修改替换后的节点");
			para.appendChild(node);
			var parent = document.getElementById("div1");
			var child = document.getElementsByClassName("p1")[count1];
			console.log(count);
			if(document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点"){
				count1 += 1;
				parent.replaceChild(para,child);
			}
			else{
				alert("全都替换完毕");
				return 0;
			}
		}
		else alert('没有可替换选项');
	}
	</script>
</html>

	function rep(){
		if(count>-1){
			var para = document.createElement("p");
			para.className="p1";
			var node = document.createTextNode("修改替换后的节点");
			para.appendChild(node);
			var parent = document.getElementById("div1");
			var child = document.getElementsByClassName("p1")[count1];
			console.log(count);
			if(document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点"){
				count1 += 1;
				parent.replaceChild(para,child);
			}
			else{
				return 0;
			}
		}
	}

实例解析：
让新节点替换原来的节点（从第一条开始替换）：
新节点para,旧节点child

parent.replaceChild(para,child);

判断最后一条旧节点是否还存在，若存在进行替换操作，否则替换完毕：

document.getElementsByClassName('p1')[count].innerHTML=="新的一条节点")

运行截图：
在这里插入图片描述

总结：

appendChild(para)//新增子节点，添加新元素para到尾部

insertBefore(para,child)//新节点para元素添加到指定的节点child元素的开始位置

parent.removeChild(child);//从父元素parent中删除子节点child

replaceChild(para,child);//让para节点替换child节点