jQuery中li的前添加和后追加

时间:2025-04-04 08:59:21
<html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-2.2."> </script> <script type="text/javascript"> $(function(){ //获取按钮并设置点击事件 $("button").click(function(){ //获取输入框里面的值 var value = $("input[name = 'uname']").val(); // switch ($(this).html()){ case "前添加": //获取到ul并在其前面添加 //$("ul").prepend("<li>" + value +"</li>"); $("<li>" + value +"</li>").prependTo("ul"); break; case "后追加": $("ul").append("<li>" + value +"</li>"); //$("<li>" + value +"</li>").appendTo("ul"); break; } }); }); </script> </head> <body> <h2>jquery 前追加和后追加</h2> <ul> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> 名称:<input type="text" name="uname" /> <button>前添加</button> <button>后追加</button> </body> </html>