Javascript 我想多次调用同一个函数，而不会丢失其预览输出。我不知道'；我不想使用数据库。我应该用什么？

我需要通过调用同一个函数来生成多个表。执行此操作时，previews表丢失，因为我调用了函数。我是JavaScript新手。你能建议我应该用什么吗。注意：我不想使用数据库来保存信息。我不确定是否应该使用Ajax，或者是否有其他简单的方法，只使用JavaScript

    <form>
        Row: <input type="text" id="x"    />
        Columns:<input type="text" id="y"  />
        <input type="button"  value="OK" onclick='createTable();'></input>
    </form>
    <div id="table"></div>
    <script>
    function createTable(){

            var x= document.getElementById("x").value;
            var y= document.getElementById("y").value;

            var rX = parseInt(x);
            var cY = parseInt(y);

            var theader = '<table>\n';
            var tbody = "";

            for(i= 1; i <= rX; i++){
                tbody += '<tr>';

                for (j = 1; j<= cY; j++){

                    tbody += '<td>';
                    tbody  += i +':' +j;
                    tbody += '</td>';
                }

                tbody += '</tr>\n';
            }

            var tfooter = '</table>';

            document.getElementById("table").innerHTML = theader + tbody + tfooter;}
      </script>

行：
柱：
函数createTable（）{
var x=document.getElementById（“x”）.value；
var y=document.getElementById（“y”）.value；
var rX=parseInt（x）；
var cY=parseInt（y）；
变量theader='\n'；
var tbody=“”；
对于（i=1；i，您可以将新表添加到输出中的最后一个表中

document.getElementById("table").innerHTML += theader + tbody + tfooter;
//                                         ^


函数createTable（）{
var x=document.getElementById（“x”）.value；
var y=document.getElementById（“y”）.value；
var rX=parseInt（x，10）；//添加基数
var cY=parseInt（y，10）；//添加基
变量theader='\n'；
var tbody=“”；
对于（i=1；我返回表，而不是直接覆盖它，然后在函数外部决定如何更新它。一般来说，更喜欢返回数据，而不是在函数内部处理外部事物。