02-末尾添加节点

2021/10/9 23:38:30

编程Tag： 标签添加 li 节点 appendchild ul document 末尾 02

本文主要是介绍02-末尾添加节点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

        在末尾添加节点
   第一步：获取到ul标签
   第二步：创建li标签
              - document.createElement("标签名称")方法
   第三步：创建文本
              - document.createTextNode("文本内容");

   第四步：把文本添加到li下面
              - 使用 appendChild方法
   第五步：把li添加到ul末尾
              - 使用 appendChild方法

<html >
 <head>
   
  <title>HTML示例</title>
  <style type = "text/css">
  div{
	width:100px;
	height:100px;
	border:2px solid gray;
  }
  </style>
 </head>
 <body>
	 <div >
		   <ul id="ulid">
				<li >马化腾</li>
				<li >马云</li>
				<li >雷军</li>
		   </ul>
	 </div>
	  
	   <input type="button" value="add" onclick="add1()" />
 </body>
 <script type="text/javascript">
 	function add1(){
		/*
		1.获取ul标签
		2.创建li标签
		3.创建文本
		4.把文本添加到li下面
		5.把li添加到ul末尾
	*/
	var ul1 = document.getElementById("ulid");
	var li1 = document.createElement("li");
	var tex = document.createTextNode("马文军");
	li1.appendChild(tex);
	ul1.appendChild(li1);
	}
	
   </script>

</html>

效果图

这篇关于02-末尾添加节点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

02-末尾添加节点

相关编程文章