JQuery not rendering HTML

I am using $.get() in my ASP.NET MVC 3 application to get a response from database asynchronously. I get the response returning correctly and based on the response I generate my HTML in a string variable and finally append it to a div already on my markup page. In debug mode it shows me the complete HTML created but it doesn't get rendered in browser.

Here is my sample code

$.get("/Modules开发者_运维百科/FetchModuleActionsByModuleID", { ModuleID: ModuleID }, function (response)
{
    if (response.replace(/"/g, '') != '{d:[]}' && response.replace(/"/g, '') != '{d:null}' && response.replace(/"/g, '') != '' && response != '')
    {
        var actions = eval('(' + response + ')');
        var moduleHtml="";
        if (actions.length > 0)
        {
            for (i = 0; i < actions.length; i++)
            {

                moduleHtml += "<div class='moduleFieldSetting'>";
                moduleHtml += "<span class='pdRL10x2 fl'><input type='checkbox' name='" + ModuleName + "_Actions' value='" + actions[i].ActionID + "' /></span>";
                moduleHtml += "<span>" + actions[i].ActionName + "</span>";
                moduleHtml += "<div class='clear'></div>";
                moduleHtml += "</div>";
            }

            moduleHtml += "<div class='fr mt15'>";
            moduleHtml += "<span class='fr'><input type='button' class='inpuButtonAdd' value='Save' /> ";
            moduleHtml += "<input type='button' class='inpuButtonAdd' value='Cancel' /> ";
            moduleHtml += "</span>"
            moduleHtml += "</div>";

            moduleHtml += "</div>";

            moduleHtml += "<div class='clear'></div>";
            moduleHtml += "</div>";
            moduleHtml += "</div>";
            moduleHtml += "<div class='clear'></div>";


            $("#divModuleDetails").append(moduleHtml); //appending to div
        }
    }
});

What could be causing this?

look at this line:

moduleHtml += "</span>"

i think the problem is script still printing only a span but maybe nothing :)

anyway checkout below script optimization i think it should work ;)

    $.get("/Modules/FetchModuleActionsByModuleID", { ModuleID: ModuleID }, function (response)
{
    if (response.replace(/"/g, '') != '{d:[]}' && response.replace(/"/g, '') != '{d:null}' && response.replace(/"/g, '') != '' && response != '')
    {
        var actions = eval('(' + response + ')');
        var moduleHtml;
        if (actions.length > 0)
        {
            for (i = 0; i < actions.length; i++)
            {

                moduleHtml += "<div class='moduleFieldSetting'>"
                + "<span class='pdRL10x2 fl'><input type='checkbox' name='" 
                + ModuleName
                + "_Actions' value='" 
                + actions[i].ActionID 
                + "' /></span>"
                + "<span>" 
                + actions[i].ActionName 
                + "</span>"
                + "<div class='clear'></div>"
                + "</div>";
            }

           moduleHtml += "<div class='fr mt15'>"
            +"<span class='fr'><input type='button' class='inpuButtonAdd' value='Save' /> "
            + "<input type='button' class='inpuButtonAdd' value='Cancel' /> "
            +"</span>"
            + "</div>"
            + "</div>"
            + "<div class='clear'></div>"
            + "</div>"
            + "</div>"
            + "<div class='clear'></div>";


            $("#divModuleDetails").append(moduleHtml); //appending to div
        }
    }
});