关于无法在div盒子中获取表格的问题，如何解决？

无法在div盒子中生成表格

用代码块功能插入代码，请勿粘贴截图

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态生成表格title>
head>
<style type="text/css">
    h1,
    #form1 {
        width: 600px;
        margin: 20px auto;
    }

    table {
        border-collapse: collapse;
        border-color: #0099FF;
        width: 800px;
        /* background-color: #fff; */
    }

    td {
        /* border-color: #0099FF; */
        padding: 5px;
        border: 1px solid #0099FF;
    }
style>
head>

<body>
    <h1>软工2110班季馨妍的动态表格h1>
    <form id="form1" name="form1" method="post" action="">
        <fieldset>
            <legend>动态创建表格legend>
            <div align="center">行数：
                <select name="lstRowNum" id="lstRowNum">
                    <option value="0">请选择option>
                    <option value="1">1option>
                    <option value="2">2option>
                    <option value="3">3option>
                    <option value="4">4option>
                    <option value="5">5option>
                    <option value="6">6option>
                    <option value="7">7option>
                    <option value="8">8option>
                    <option value="9">9option>
                    <option value="10">10option>
                select> 列数：
                <select name="lstColNum" id="lstColNum">
                    <option value="0">请选择option>
                    <option value="1">1option>
                    <option value="2">2option>
                    <option value="3">3option>
                    <option value="4">4option>
                    <option value="5">5option>
                    <option value="6">6option>
                    <option value="7">7option>
                    <option value="8">8option>
                    <option value="9">9option>
                    <option value="10">10option>
                select>
                <input name="btnCreateTable" type="button" id="btnCreateTable" onclick=createTable(); value="生成表格" />
            div>
        fieldset>
    form>
    <div id="div1" align="center">div>
    <script>
        
        var str = "";
        function createTable() {
            var col = document.getElementById("lstColNum").value;
            var row = document.getElementById("lstRowNum").value;
            document.write("");
            for (var r = 0; r < row; r++) {
                str += document.write("");
                for (var c = 0; c < col; c++) {
                    str += document.write("");
                }
                str += document.write("")
            }
            str += document.write("");
                    str += document.write("第" + (r + 1) + "行第" + (c + 1) + "列")
                    str += document.write("
")
        }
        document.getElementById("div1").innerHTML = str;
    script>
body>

html>

运行结果没错

想在div盒子中生成表格

要確定這幾行沒有不小心分成兩行，否則會有錯誤。

str += document.write("");
str += document.write("第" + (r + 1) + "行第" + (c + 1) + "列");
str += document.write("");

不能用document.write，用这个相当于断开了之前的东西，

像这些

str += document.write("");
str += document.write("第" + (r + 1) + "行第" + (c + 1) + "列");

改成

str += "";
str += "第" + (r + 1) + "行第" + (c + 1) + "列";