JavaScript的DOM对象2(创建新节点后前插入，后插入，移除，替换）

最新推荐文章于 2023-03-15 15:55:02 发布

tracer－85

最新推荐文章于 2023-03-15 15:55:02 发布

阅读量408

点赞数 1

分类专栏：我的web（JavaScript）2学习笔记文章标签： WEB开发二-JavaScript的笔记

本文链接：https://blog.csdn.net/weixin_43560263/article/details/103118410

版权

我的web（JavaScript）2学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1创建新节点：createElement(新节点，原节点)；

1.介绍如何在body标签的最后添加节点（对象.appendChild(插入节点);）

<body>
	<div id="container">`在这里插入代码片`
		<img src="img/-538175402.jpg"/>
		<img src="img/-538175402.jpg"/>
	</div>
	<button id="appendChild">appendChild</button>
	</body>
	<script>
var appendChild=document.getElementById("appendChild");
		appendChild.onclick=function(){
			var imgNode=document.createElement("img");//创建插入节点
			imgNode.src="img/527545959.jpg";//编辑插入节点的属性，编辑内容用innerHTML即可
			var container=document.getElementById("container");
			//document.body.appdendChild(imgNode);//parentNode.appendChild(childNode)向parentNode节点对象最后的位置添加childNode
			container.appendChild(imgNode);
		}//向最后插入节点
</script>

2.介绍如何在某一结点的前面添加（对象.insertBefore(插入节点，原节点);）

<body>
	<div id="container">`在这里插入代码片`
		<img src="img/-538175402.jpg"/>
		<img src="img/-538175402.jpg"/>
	</div>
	<button id="insertBefore">insertBefore</button>
	</body>
var insertBefore=document.getElementById("insertBefore");
		var img1=document.getElementsByTagName("img")[1];
		insertBefore.onclick=function(e){
			e.stopPropagation();//预防前一个节点被触发
			var container=document.getElementById("container");
			var img2=document.createElement("img");
		    img2.src="img/527545959.jpg";
			container.insertBefore(img2,img1);
		}//向特定结点之前插入

3.insertAfter/before/After等方法也可以
4.删除节点元素

<body>
	<div id="container">`在这里插入代码片`
		<img src="img/-538175402.jpg"/>
		<img src="img/-538175402.jpg"/>
	</div>
	<button id="removeChild">removeChild</button>
	</body>
	//删除节点
		var removeChild=document.getElementById("removeChild");
		removeChild.onclick=function(){
			var img0=document.getElementById("img0");
			var container=document.getElementById("container");
			container.removeChild(img0);//通过节点的id删除
			//img0.parentNode.removeChild(img0);//通过节点的父节点删除它
		}

例题：实现如图效果
点击之前
点击之后

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		td{
			width: 200px;
		}
	</style>
</head>
<body>
	<table border="1" cellspacing="0" id="tb">
		<tr>
			<td>
				<button>点我删除行0</button>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>
				<button>点我删除行1</button>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>
				<button>点我删除行2</button>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>
				<button>点我删除行4</button>
			</td>
			<td></td>
			<td></td>
		</tr>
	</table>

</body>
<script>
	var tb=document.getElementById("tb");
	var btnList=tb.getElementsByTagName("button");
	for(var i=0;i<btnList.length;i++){
		/*在事件的回调函数中，无法获取到外层遍历的索引值
		在事件的回调函数中，this指代当前出发时间的DOM对象
		*/
		btnList[i].onclick=function(){
			// console.log(i);一直输出4
			var trNode=this.parentNode.parentNode;
			trNode.parentNode.removeChild(trNode);
		}
	}

</script>
</html>

4.replaceChild（新节点，原节点）替换

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="container">
		<p id="p1">这是一个段落</p>
	</div>
</body>
<script>
	var container=document.getElementById("container");
	var p1=document.getElementById("p1");
	var hNode=document.createElement("h3");
	hNode.innerHTML="这是一个标题";
	p1.onclick=function(){
		container.replaceChild(hNode,p1);//将p1换成hNode
	}		
</script>
</html>