为啥我在javascript里写的<tr><td>不生效

写ajax返回数据到页面上时用html拼接的数据不会换行

运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果
ajax：
$("#test").click( function() {
        $.ajax({
            url:"medicineList",
            type:"GET",
            dataType:"json",
            success:function(json){
                if(json.state == 200){
                    var html1 = "";
                    for(var i = 0; i < json.data.length; i++){
                        html1 += "<tr>" +
                            "<td>" + json.data[1].mid + "</td>"+
                            "<td>" + json.data[1].mname + "</td>"+
                            "<td>" + json.data[1].mprice + "</td>"+
                            "<td>" + json.data[1].type + "</td>"+
                            "</tr>"
                    }
                    $("#testBody").html(html1);
                }
            },
            error:function (json){
                alert("失败")
            }
        })
    })

<body>
    <button id = "test">show</button>
    <table>
        <tr>
            <td align="center" height="80">药品编号</td>
            <td align="center">药名</td>
            <td align="center">药价</td>
            <td align="center">种类</td>
        </tr>
    </table>
    <tboody id = "testBody">
    </tboody>
    </body>

img

table布局换成这样


<table>
        <thead>
            <tr>
                <th align="center" height="80">药品编号</th>
                <th align="center">药名</th>
                <th align="center">药价</th>
                <th align="center">种类</th>
            </tr>
        </thead>
        <tbody id="testBody"></tbody>
    </table>

这里的1换成i

img