jquery动态加载html元素失败

Question

今天在实现登录成功后才向页面添加html元素时，始终会报一个错误：
（之前传了一个错的，抱歉）

我在登录中使用了权限验证，但是在首页的加载过程中不需要验证权限，所以我想要在登录后验证角色正确后才显示相应模块。

js代码如下：

function login(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: 'post',
            url:'login.do',
            data: {"username":username,"password":password},
            dataType:'text',
            success: function(msg){
                $("#login_text").css('display','none');
                $("#link_login").css('display','none');
                $("#user_nickname").removeClass("user_nickname");
                $("#user_nickname").addClass("user_nickname_2");
                /* $("#upload_btn").removeClass("link_login_2");
                $("#upload_btn").addClass("link_login"); */
                var shiro = "<shiro:hasRole name='2001'><div id='upload_btn' class='link_login_2' lay-on='upload_page'>上传我的视频</div></shiro:hasRole>";
                $("#right_section").append(shiro);
                // $("#123").html(nihao);
                layui.use(function(){
                    var layer = layui.layer;
                    layer.closeLast('page');
                })
            }
        });
    }

前端代码如下：

<div id="right_section">
    <span id = "123"></span>
    <div style="width:280px;text-align:center;margin-top:30px;">
        <span><a style="font-size:18px;font-weight:bolder;">新人注册即享七天畅学卡</a></span>
    </div>
    <div style="width:280px;text-align:center;margin-top:15px;">
        <span><a style="">海量优质课程七天免费畅学</a></span>
    </div>
    <div style="width:280px;height:150px;">
        <img style="width:213px;height:122px;margin:30px 30px 0 32px;"src="//p.qpic.cn/qqconadmin/0/3435fc13890f472c811f1aa8e4251167/0"/>
    </div>
    <div id="link_login" class="link_login" lay-on="login_page" >
        登录/注册
    </div>                
</div>

抱歉，错误截图截错了，感谢评论区的指正

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/337479
• 这篇博客也不错, 你可以看下jquery实现在一个框中输入内容，点击添加后，在另外一个框中显示出来，且能删除
• 除此之外, 这篇博客: 一篇博文带你 jQuery入门，万字肝爆！ 建议收藏~中的 元素位置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 元素相对页面的位置操作：

  元素.offset(); / 获取到元素在页面中的位置，包含left值和top值，返回一个对象
  元素.offset({left:值,top:值}); / 将元素设定到指定的位置，使用relative
  

  元素相对父元素的值：

  元素.position(); / 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top	
  

  获取元素滚动过的距离：

  $(window).scrollTop(); / 获取元素滚动过的高度
  $(window).scrollLeft(); / 获取元素滚动过的宽度
  $(window).scrollTop(值); / 设置元素滚动过的高度
  $(window).scrollLeft(值); / 设置元素滚动过的宽度
  

  ---

• 您还可以看一下 胡延亮老师的初级学软件之jquery框架课程中的 页面元素操作实例小节, 巩固相关知识点