js综合练习----在末尾添加节点（一）

最新推荐文章于 2023-10-23 10:43:03 发布

今夕何夕i

最新推荐文章于 2023-10-23 10:43:03 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/NingIT/article/details/100587002

js 专栏收录该内容

4 篇文章

订阅专栏

本文展示了一个HTML页面示例，包含使用内联样式定义的div元素和一个ul列表。通过JavaScript函数，演示了如何从页面中获取元素，并将一个元素（如ul列表）移动到另一个元素（如div）中，以及如何在ul列表中动态添加新的li项。

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

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div{
		width:200px;
		height:200px;
		border:2px solid red;
	}
  </style>
 </head>
 <body>
 <div>
	<ul id="ulid">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>
<div id="div1">

</div>
	<br/>
	<input type="button" value="add" onclick="add2();"/>
	<script type="text/javascript">
		function add2() {
			var div1 = document.getElementById("div1");
			var ul1 = document.getElementById("ulid");
			div1.appendChild(ul1);
		}

		//在末尾添加节点
		function add1() {
			//获取到ul标签
			var ul1 = document.getElementById("ulid");
			//创建标签
			var li1 = document.createElement("li");
			//创建文本
			var tex1 = document.createTextNode("5555");
			//把文本加入到li下面
			li1.appendChild(tex1);
			//把li加入到ul下面
			ul1.appendChild(li1);
		}
		
	</script>

 </body>
</html>