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

最新推荐文章于 2022-08-24 17:44:21 发布

今夕何夕i

最新推荐文章于 2022-08-24 17:44:21 发布

阅读量401

点赞数

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

本文链接：https://blog.csdn.net/NingIT/article/details/100587002

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>

今夕何夕i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js综合练习----在末尾添加节点（一）

<html> <head> <title>HTML示例</title> <style type="text/css"> div{ width:200px; height:200px; border:2px solid red; } </style> </head> <body...
复制链接

扫一扫