javascript - 如何在 html 中使用 jquery 加载文档后附加 html？

Question

我从 jsp 获取用户名。将其分配给一个变量。然后，当我尝试将此 html 附加到 .linkUser 类时。它没有添加。为什么我不知道。请帮助我。

JS:

    <script defer>
        var signedUserId ="${app.user.id}";   
           console.log('signedUserId ...' + signedUserId);
           if(signedUserId == null || signedUserId == "" || signedUserId == undefined){
               signedUserId = "${signedUserID}";
           }


            var userName = "${user.firstName}";  
            var userNameHtml = "";
             if(userName == "" || userName == undefined || userName == null){
                userName = "${signedUserName}";
                userNameHtml += "Hi, "+userName+" <span class=\"caret\"></span>";
                //$(".linkUser").html(userNameHtml);
                $( ".linkUser" ).after( userNameHtml );
                console.log('true ****** ');
            }else{
                userNameHtml += "Hi, "+userName+" <span class=\"caret\"></span>";
                $(".linkUser").after(userNameHtml);
            }
    <script>

HTML:

    <li class="li-user dropdown">
                                    <a id="anchor" class ="linkUser" title="" href="javascript:void(0);" data-toggle="dropdown" 
                                    aria-haspopup="true" aria-expanded="false"> </a>
                                    <ul class="dropdown-menu" aria-labelledby="linkUser">
                                        <li><span class="caret"></span><span class="caret"></span>
                                        <a id = "anchor" title="" onclick="profile()" href="#"> View Profile <span class="icon icon-profile"></span> </a></li>

                                        <li><a id = "anchor" title="" href="#">Settings <span class="icon icon-settings"></span></a></li>
                                        <li><a id = "anchor" title="" href="javascript:zimidyLogout();">Sign Out <span class="icon icon-sign-out"></span></a></li>
                                    </ul>
                                </li>

Answer 1

   Put Your Code In Document Ready State 
    <script defer>
    $(document).ready(function(){
    var signedUserId ="${app.user.id}";   
    console.log('signedUserId ...' + signedUserId);
    if(signedUserId == null || signedUserId == "" || signedUserId == undefined){
        signedUserId = "${signedUserID}";
       }
    var userName = "${user.firstName}";  
    var userNameHtml = "";
    if(userName == "" || userName == undefined || userName == null){
       userName = "${signedUserName}";
       userNameHtml += "Hi, "+userName+" <span class=\"caret\"></span>";
       //$(".linkUser").html(userNameHtml);
       $( ".linkUser" ).after( userNameHtml );
       console.log('true ****** ');
       }else{
            userNameHtml += "Hi, "+userName+" <span class=\"caret\"></span>";
       $(".linkUser").after(userNameHtml);
       }
       });

<script>