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 -->