appendChild 和insertBefore的区别

我心向阳.

已于 2022-06-11 08:50:58 修改

阅读量158

点赞数 1

文章标签： javascript 前端 html

于 2022-06-09 17:29:43 首次发布

本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/125207760

版权

相同点：都是添加一个元素

不同点：添加的位置不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
			<ul id="uls">
				<li>我是中国人</li>
				<li>我是中国人</li>
				<li>我是中国人</li>
			</ul>
	
		<script>
			// 添加节点到指定元素的末尾
			var ul = document.getElementById('uls')
			var lis = document.createElement('li')
			ul.appendChild(lis)
			lis.innerHTML='我是appendChild'
			
			// 添加一个元素在指定子元素之前
			var lili = document.createElement('li')
			ul.insertBefore(lili,ul.children[1])
			lili.innerHTML ='我是insertBefore'
		</script>
	</body>
</html>