JavaScript文档对象模型DOM节点操作之创建和添加节点（5）

最新推荐文章于 2022-04-28 09:50:31 发布

积沙成塔——

最新推荐文章于 2022-04-28 09:50:31 发布

阅读量158

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45308912/article/details/121362388

版权

HTML DOM操作元素节点 appendChild insertBefore

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

在这里插入图片描述

得出结论：创建元素节点后,必须要把刚创建的元素节点添加到相应的元素下，否则不会在页面出现

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>123</li>
		</ul>
		<script>
			//1.创建元素节点
			var li = document.createElement('li');
			//2.添加节点 node.appendChild(child) node是父亲 child是儿子 
			//是在后面追加元素 类似于数组中的push方法
			var ul = document.querySelector('ul');
			ul.appendChild(li);
			//3.添加到某个节点前面
			var lili = document.createElement('li');
			ul.insertBefore(lili,ul.children[0]);
			//我们想要页面添加一个元素：1.创建元素节点 2.添加到相应元素里面
		</script>
	</body>
</html>