Java教程

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-末尾添加节点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航