js动态向页面中添加表格

我们在实际开发中经常会想要实现如下情况：
点击某个按钮，然后动态的网页面里面添加一个表格或者一行，这个更加灵活方便。但是实现起来肯定不能像在页面里面直接写标签来的容易，以下是我项目中的代码，拿过来分享：
<html>
<head>
<script type="text/javascript">
    var i = 0;
    function deleteTable(myNode) {
        i --;
        document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);
    }
    
    function createImageTable() {
        i++;
        if(i > 1) {
            i --;
            alert("每次只允许添加1道问题");
        } else {
            var t = document.createElement('table');
            //动态添加第一行
            var tr1 = t.insertRow(-1);
            var td11 = tr1.insertCell(-1);
            td11.align="right";
            td11.width="180";
            var td12 = tr1.insertCell(-1);
            //设置内容和属性    
            td11.innerHTML = "题目 :";
            td12.innerHTML = "<input type='text' name='textTitle' id='textTitle' /><input type='hidden' name='quesLeixing' value='image' id='quesLeixing'/>         <input type=button value='删除该题' onclick='deleteTable(this)'/>";
            //动态添加第二行
            var tr1 = t.insertRow(-1);
            var td11 = tr1.insertCell(-1);
            td11.align="right";
            td11.width="180";
            var td12 = tr1.insertCell(-1);
            //设置内容和属性    
            td11.innerHTML = "添加图片文件 :";
            td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";
            //添加第三行
            var tr2 = t.insertRow(-1);
            var td11 = tr2.insertCell(-1);
            td11.align="right";
            var td12 = tr2.insertCell(-1);
            //设置内容和属性    
            td11.innerHTML = "试题类型 :";
            td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>单选题      <input type=radio name='textQuesType' value='multiple'/>多选题";
            //添加第四行
            var tr3 = t.insertRow(-1);
            var td31 = tr3.insertCell(-1);
            td31.align="right";
            var td32 = tr3.insertCell(-1);
            //设置内容和属性    
            td31.innerHTML = "选项1 :";
            td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='0'/>";
            //添加第五行
            var tr3 = t.insertRow(-1);
            var td31 = tr3.insertCell(-1);
            td31.align="right";
            var td32 = tr3.insertCell(-1);
            //设置内容和属性    
            td31.innerHTML = "选项2 :";
            td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='1' />";
            //添加第六行
            var tr3 = t.insertRow(-1);
            var td31 = tr3.insertCell(-1);
            td31.align="right";
            var td32 = tr3.insertCell(-1);
            //设置内容和属性    
            td31.innerHTML = "选项3 :";
            td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='2' />";
            //添加第七行
            var tr3 = t.insertRow(-1);
            var td31 = tr3.insertCell(-1);
            td31.align="right";
            var td32 = tr3.insertCell(-1);
            //设置内容和属性    
            td31.innerHTML = "选项4 :";
            td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='3' />";
            //添加第八行
            var tr3 = t.insertRow(-1);
            var td31 = tr3.insertCell(-1);
            td31.align="right";
            var td32 = tr3.insertCell(-1);
            //设置内容和属性    
            td31.innerHTML = "选项5 :";
            td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='4' />";
            t.setAttribute("frame", "below");
            t.setAttribute("width", "676");
            //t.setAttribute("border", "1");
            t.setAttribute("bordercolor", "#818181");
            document.getElementById('table1').appendChild(t);
        }
    }
</script>

</head>
<body>
                <font color="#B3171C" size="5">添加测评问题</font><p/>
                <table width="677" border="0" id="quesTable">
                    <tbody>
                        <tr>
                            <td colspan="3" align="center">选择添加试题类型：
                            <input type="button" name="addtext" value="图片类型" onclick="createImageTable()" /> 
                            </td>
                        </tr>
                    </tbody>
                </table>

        </form>
    </div>
</body>
</html>