大的HTML字符串追加使用jQuery不工作

Question

我想追加一个空div里面的html：

<div id="admin_chatRoom"> 

</div> 

jQuery代码：

var chatBox = '<div class = "msg_box admin-msg-box" style = "right:55px;" >' + 
         '< div class = "msg_head " >' + 
         '<a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot;)) { return true; } return false;"'+ 
          'href="'+$("#webroot").text()+'/chats/activate/'+'10'+'" title="delete">'+ 
          '<span class="fa fa-minus-square"></span>'+ 
         '</a>'+       
         '&nbsp;&nbsp;'+ 
         '< /div>' + 
         '< div class = "msg_wrap" >' + 
         '< div class = "msg_body" >' + 
         '< div class = "msg_push" > < /div>' + 
         '< /div>' + 
         '< div class = "msg_footer" > < textarea class = "msg_input" rows = "4" > < /textarea></div >' + 
         '< /div>' + 
         '< /div>'; 
        $('#admin_chatRoom').append(chatBox); 
       }); 

应该动态地创建聊天框。但它只是打印出所有的HTML内容为普通字符串。我在做什么错了？

Answer 1

问题是你的HTML格式，关闭标签的格式不正确......有<和/

var chatBox = '<div class = "msg_box admin-msg-box" style = "right:55px;" >' + 
 
    '<div class = "msg_head " >' + 
 
    '<a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot;)) { return true; } return false;"' + 
 
    'href="' + $("#webroot").text() + '/chats/activate/' + '10' + '" title="delete">' + 
 
    '<span class="fa fa-minus-square"></span>' + 
 
    '</a>' + 
 
    '&nbsp;&nbsp;' + 
 
    '</div>' + 
 
    '<div class="msg_wrap" >' + 
 
    '<div class="msg_body" >' + 
 
    '<div class="msg_push" ></div>' + 
 
    '</div>' + 
 
    '<div class="msg_footer" > <textarea class = "msg_input" rows = "4" ></textarea></div >' + 
 
    '</div>' + 
 
    '</div>'; 
 
$('#admin_chatRoom').append(chatBox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="admin_chatRoom"></div>