Normalmente `document.write` é usado em JS para compor partes de uma página **durante sua carga** (por sinal, seu uso é desencorajado por uma série de razões e efeitos colaterais).

Ocorre que sua função está sendo chamada **depois** do HTML original já ter sido servido e o DOM já montado. Isso faz com que implicitamente, na primeira ocorrência, seja chamado um `document.open`, efetivamente sobreescrevendo o documento original.

Da própria [documentação da MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/write):

> _Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document._

que traduzido é:

> _Nota: à medida que document.write grava no fluxo de documentos, chamando document.write em um documento fechado (carregado) invoca automaticamente document.open, que limpará o documento._

Mesmo resolvendo esta parte, ainda tem o problema do botão enviar o form (é o comportamento do `button`), o que pode não ser desejável nesse caso. 

Isso se resolve com `<button type="button">` (dá para suprimir o evento de submit, mas melhor é nem disparar).

Solução substituindo o `document.write` por `innerHTML`:
---

Uma possível solução para criar conteúdo em um documento já existente é substituindo o conteúdo HTML de um elemento.

Para fins de exemplo usaremos `<div id="output"></div>`, mas pode adaptar para qualquer elemento:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function Gerar() {
      var output = document.getElementById('output');
      output .innerHTML = '<table>';          // Primeiro usamos =
      output .innerHTML += '<tr>';            // depois += para acrescentar
      output .innerHTML += '<td>CONTEUDO GERADO</td>';
      output .innerHTML += '</tr>';
      output .innerHTML += '</table>';
    }

<!-- language: lang-html -->

    <body>
      <form>
        Conteudo preexistente da pagina<br>
        <button type="button" onClick="Gerar()">Gerar</button>
        <div id="output"></div>
      </form>
    </body>
    </html>

<!-- end snippet -->

Se fosse um conteúdo puramente textual, poderiamos usar `innerText`.

Alternativamente, criando conteúdo diretamente no DOM:
---

Com `document.createElement` podemos criar qualquer elemento do HTML, e para inserir um elemento dentro de outro usamos `document.appendChild` (tem outras maneiras, mas vamos focar nessas bem corriqueiras):


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function Gerar() {
      var output = document.getElementById('output');
      var table  = document.createElement('table');
      var tr     = document.createElement('tr');
      var td     = document.createElement('td');
      td.innerText = 'CONTEUDO GERADO';
      tr.appendChild(td);
      table.appendChild(tr);
      output.appendChild(table);
    }

<!-- language: lang-html -->

    <body>
      <form>
        Conteudo preexistente da pagina<br>
        <button type="button" onClick="Gerar()">Gerar</button>
        <div id="output"></div>
      </form>
    </body>
    </html>

<!-- end snippet -->