jQuery中li的前添加和后追加

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

    jQuery中li的前添加和后追加_第1张图片

    你可能感兴趣的:(前端)