js动态插入节点

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

原创最新推荐文章于 2022-04-28 09:50:31 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript来动态创建菜单的方法。通过创建ul和li元素，并使用JavaScript进行样式设置和内容填充，可以实现菜单项的动态添加。此方法适用于需要实时更新菜单的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				list-style: none;
				padding-left: 0;
			}
		</style>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var father = document.createElement("ul");//创建一个ul
	var son = document.createElement("li");//创建一个li
	son.style.backgroundColor = "yellow";//li的颜色为黄色
	son.style.width = "150px";//li的宽度为150px
	son.style.textAlign = "center";//li文本居中对齐
	var txt = document.createTextNode("椒盐蘑菇");//创建一个文本
	var btn = document.createElement("button");//创建一个按钮
	document.body.appendChild(btn);//把按钮添加到body
	btn.innerHTML = "新建菜单";//按钮的内容
	son.appendChild(txt);//把txt添加到li里
	document.body.appendChild(son);//把li添加到body里
	father.appendChild(son);//把li添加到ul里
	document.body.appendChild(father);
	btn.onclick = function() {
		var son = document.createElement("li");
		son.style.backgroundColor = "yellow";
		son.style.width = "150px";
		son.style.textAlign = "center";
		var txt = document.createTextNode("椒盐蘑菇");
		son.appendChild(txt);
		document.body.appendChild(son);
		father.appendChild(son);
		document.body.appendChild(father);
	}
</script>