javascript - jquery div 在手前关闭并且是空的

Question

我有这个脚本，主要问题是当我 console.log(schema ) 时，它显示包含所有 ul 的 div.tableSpaces > 元素，但是当我使用 .html(schema) 时，它会关闭 div

function getdatabase(event) {
    var a = $(event).val();
    $.ajax({
        type: "POST",
        url: 'getDatabaseSchema',
        data: {
            'adapter': a
        },
        dataType: 'JSON',
        success: function(data) {
            console.log(data);
            var schema = [];
            $.each(data.table, function(k, v) {
                schema.push("<div class='col-md-5 tableSpaces'>");
                schema.push("<h4>" + k + "</h4>");
                var str = "<ul class=''>";
                $.each(v, function(key, val) {
                    str += "<li>" + val + "</li>";
                });
                str += "</ul>";
                schema.push(str);
                schema.push("</div>");
            })
            console.log(schema);
            $("#tablebox").fadeIn();
            $("#tables").html(schema);
        }
    });
}

我得到了什么

             <div id="tables">
  <!--  See this Div Closes  without any of the h4 or ul  elements within it -->
        <div class="col-md-5 tableSpaces"></div> <-----------------
        <h4>user_department_map</h4>
        <ul class="">
        <li>id</li><li>dep_id</li>
        <li>user_id</li>
        <li>dept_head</li>
        </ul>
        <div>

我在使用 ul 时遇到了类似的问题，然后我不得不将它添加到一个字符串中

我需要什么

<div id="tables">
  <!--  See here the div incases the h4 an ul elements-->
        <div class="col-md-5 tableSpaces">
        <h4>user_department_map</h4>
        <ul class="">
        <li>id</li><li>dep_id</li>
        <li>user_id</li>
        <li>dept_head</li>
        </ul>
       </div>
        <div>

Answer 1

使用Array.join()在将其设置为 .html()

之前创建一个字符串

 $("#tables").html(schema.join(''));

var schema = [];
schema.push("<div class='col-md-5 tableSpaces'>");
schema.push("<h4>Heading</h4>");
schema.push("<ul class=''>");
schema.push("<li>" + 1 + "</li>");
schema.push("</ul>");
schema.push("</div>");

$("#tables").html(schema.join(''));

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