javascript - 为什么我用 append（）插入代码后里面的js程序无效？-PHP中文网问答

本来网页头部导航跟底部导航是固定的对不对，每张页面都要有，一般情况下我们要么直接粘贴复制上去，或者写段js代码插进去。后来我为了简便，我就用jq里面的append()插进去了一段代码，我开始试验了一下，效果是出来了，但是我发现啊，插进去的部分，里面的jq写的特效都失灵了。谁能告诉我这是为什么？

代码如下：

<!doctype html>
<html lang='en'>
 <head>
  <meta charset='UTF-8'>
  <meta name='Generator' content='EditPlus®'>
  <meta name='Author' content=''>
  <meta name='Keywords' content=''>
  <meta name='Description' content=''>
  <title>Document</title>
  <link rel='stylesheet' type='text/css' href='css/nav.css'>
 </head>
 <body>
 <!--顶部导航开始-->
    <p class='upNav_box'>
        <p class='grey_nav'>
            <p class='up_choose'>
                <p class='nav_left grey'>
                    <a href='#' class='grey'>手机版</a> | &nbsp;<a href='#' class='grey'>登录</a> <a href='#' style='color:#ff7070'>注册</a>
                </p>
                <p class='nav_right'>
                    <a class='rf geren' href='#'>个人中心
                        <ul class='gerenzhongxin_li none'>
                            <li>注销登录</li>
                        </ul>
                    </a>
                    <a href='#' class='rf' style='background:url(images/top.png) no-repeat'>放货车</a>
                    <a href='#' class='rf' style='background:url(images/email.png.png) no-repeat 0 5px'>消息中心
                        <ul class='xiaoxizhongxin_li none'>
                            <li>恭喜你，成功入驻回收大王！</li>
                            <li>恭喜你，成功入驻回收大王！</li>
                            <li>恭喜你，成功入驻回收大王！</li>
                        </ul>
                    </a>
                    <a href='#' class='rf' style='background:url(images/tel.png.png) no-repeat 0 5px'>400-086-4511</a>
                </p>
            </p>
        </p>
        <p class='up_nav'>
            <p class='head_p'>
                <p class='logo_p'>
                    <a><img src='logo.png'/></a>
                </p>
                <p class='head_nav'>
                    <ul>
                        <li><p class='ap'>
                            <p class='slide_nav'></p>        
                            <a class='nav_a' href='#'>首页</a>
                            </p></li>
                        <li><p class='ap'>
                        <p class='slide_nav'></p>    
                        <a class='nav_a' href='#'>商家发货</a></p></li>
                        <li><p class='ap'>
                        <p class='slide_nav'></p>
                        <a  class='nav_a'href='#'>工具资讯</a></p></li>
                    </ul>
                </p>
            </p>
        </p>
    </p>

<!--顶部导航结束-->

<p class='next'></p>
<p class='next'></p>
<p class='next'></p>
<p class='next'></p>

<!--底部部导航开始-->
    <p class='bottomNanv_box'>
        <p class='bottom_nav'></p>
    </p>
<!--底部导航结束-->
<script src='js/jquery-2.1.4.js'></script>
<script src='js/index_nav.js'></script>
<script type='text/javascript'>
    var con = "<p class='upNav_box'>    <p class='grey_nav'><p class='up_choose'><p class='nav_left grey'><a href='#' class='grey'>手机版</a> | &nbsp;<a href='#' class='grey'>登录</a> <a href='#' style='color:#ff7070'>注册</a>        </p><p class='nav_right'>        <a class='rf geren' href='#'>个人中心                <ul class='gerenzhongxin_li none'>                <li>注销登录</li></ul></a><a href='#' class='rf' style='background:url(images/top.png) no-repeat'>放货车</a><a href='#' class='rf' style='background:url(images/email.png.png) no-repeat 0 5px'>消息中心<ul class='xiaoxizhongxin_li none'>    <li>恭喜你，成功入驻回收大王！</li>                    <li>恭喜你，成功入驻回收大王！</li>                    <li>恭喜你，成功入驻回收大王！</li></ul></a><a href='#' class='rf' style='background:url(images/tel.png.png) no-repeat 0 5px'>400-086-4511</a></p></p></p><p class='up_nav'><p class='head_p'><p class='logo_p'><a><img src='logo.png'/></a></p>    <p class='head_nav'>        <ul>    <li><p class='ap'>        <p class='slide_nav'></p>            <a class='nav_a' href='#'>首页</a>    </p></li><li><p class='ap'><p class='slide_nav'></p>    <a class='nav_a' href='#'>商家发货</a></p></li><li><p class='ap'><p class='slide_nav'></p><a  class='nav_a'href='#'>工具资讯</a></p></li></ul></p></p></p></p>";

    $('.next').append(con);
</script>
 </body>
</html>