js点击button，在页面上创建一个三行四列的表格

<script>
    //点击button，在页面上创建一个三行四列的表格。
    document.querySelector('button').onclick = function () {
        //取得页面上的button，并为button添加点击事件
        //querySelector（‘button’）取得button 
        //onclick 点击事件
        var tab = document.createElement('table');
        //创建节点 节点标签为table
        //createElement 创建节点
        tab.border = 1;//table标签的border属性为1
        tab.style.width = '500px'
        tab.style.height = '500px'
        document.body.appendChild(tab)
        //将table标签追加到父节点body的下面
        //appendChild 父节点.appendChild（DOM节点）
        for (var i = 0; i < 3; i++) {
            var tr = document.createElement('tr')
            //创建节点  节点标签为：tr
            tab.appendChild(tr);
            //将tr标签追加到父节点table标签的下面
            for (var j = 0; j < 4; j++) {
                var td = document.createElement('td');
                //创建节点 节点标签为 td
                td.innerHTML = '胡大胜'
                //innerHTML 在td标签里添加内容为1 
                td.style.textAlign = 'center';
                // style 内联样式
                //text-align 写成 textAlign
                tr.appendChild(td)
                //将td追加到父节点tr的下面
            }
        }
    }
</script>

<button>创建表格</button>

<input type="button" value="点击" id="but">
    <div id="div"></div>

<script>
    var but = document.getElementById("but")
    var div = document.getElementById("div")
    but.onclick = function () {
        //创建表
        var table = document.createElement("table");
        table.border = 1;
        table.style.width = "500px";
        table.style.height = "500px";
        div.appendChild(table)
        //创建行
        for (var i = 0; i < 3; i++) {
            var tr = document.createElement("tr");
            table.appendChild(tr);
            for (var a = 0; a < 4; a++) {
                var td = document.createElement("td");
                tr.append(td)
            }
        }
    }
</script>