Q: div is not Appending with another div using jquery I am appending div tag (this div tag is in html part) with another div tag (this div tag is in script) when hover on hyperlink using jquery.
Now, the problem is that after loading page when I hover first time on link, it appends div for sure but then It does not append div tag. So I am just confused with it.
Please help me solve the problem.
Here, I am giving some code.
<script id="CollegeInfo" type="text/html">
<div id="${CollegeId}">
    <table width="400px">
    <tr>
        <td colspan="3">
            <div  class="clgname">
            {{html CollegeName}}
            </div>
        </td>
    </tr>
    <tr style='color:Gray;'>
        <td>
        </td>
        <td width="10px">
        </td>
        <td valign="top" style='font-size:12px;'>
            <b>Rating :</b></br>
            <div class="grating"></div> // Div tag with whom I am binding html part div tag...
        </td>
    </tr>
    </table>
</div>
</script>

Jquery part :
<script type="text/javascript">
$(function(){
    $(".name").mouseover(function (e) {
        var id = $(this).attr("id");

        $.ajax({
            type: "POST",
            url: "College.asmx/GetInfo",
            data: "{'Id':" + id + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var info = response.d;
                $("#tbodyCollegeInfo").html($("#CollegeInfo").tmpl(info));

                var block_element = $("#rating");
                $('.grating').append(block_element);

                $('#hdndivCollegeInfo').attr("style","display:block;");
            }
        });
    });
});
</script>

HTML Part :
<div id="hdndivCollegeInfo" style="display: none;">
        <div class="hoverpreview">
            <div id="rating" class="rating">
                <asp:Rating ID="rtng" runat="server" BehaviorID="rating" ReadOnly="true" StarCssClass="StarCss"
                    FilledStarCssClass="FilledStarCss" EmptyStarCssClass="EmptyStarCss" WaitingStarCssClass="WaitingStarCss">
                </asp:Rating>
            </div>
            <table>
                <tbody id="tbodyCollegeInfo">
                </tbody>
            </table>
        </div>
    </div>


A: try this
        var block_element = $("#rating").outerHtml();
        $('.grating').append(block_element);

EDIT:
are you getting any error on a page?, does it reach the success part of the ajax call?

A: Don't use html tags inside the script directly. use like this
<script id="CollegeInfo" type="text/html">
var appendHtml=
'<div><table width="400px">
<tr>
        <td colspan='3'>
            <div  class='clgname'>            
            </div>
        </td>
    </tr>
    <tr style='color:Gray;'>
        <td>
        </td>
        <td width='10px'>
        </td>
        <td valign='top' style='font-size:12px;'>
            <b>Rating :</b></br>
            <div class='grating'></div>
        </td>
    </tr>
    </table></div>';

</script> 

In the ajax edit as $('.grating').append(appendHtml);

