Problema 1: --- Normalmente `document.write` é usado em JS para compor partes de uma página durante sua carga. 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. Problema 2: --- 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 HTML é substituindo o conteúdo de um elemento, por exemplo desta forma: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function Gerar() { output = document.getElementById('output'); output .innerHTML = '<table>'; // Primeiro usamos = output .innerHTML += '<tr>'; // depois += para acrescentar output .innerHTML += '<td>celula</td>'; output .innerHTML += '</tr>'; output .innerHTML += '</table>'; } <!-- language: lang-html --> <body> <div id="titulo"> <h1>Caça-Palavras</h1> <form> Conteudo da pagina<br> <button type="button" onClick="Gerar()">Gerar</button> <div id="output"></div> </form> </div> </body> </html> <!-- end snippet --> 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 = 'celula'; tr.appendChild(td); table.appendChild(tr); output.appendChild(table); } <!-- language: lang-html --> <body> <div id="titulo"> <h1>Caça-Palavras</h1> <form> Conteudo da pagina<br> <button type="button" onClick="Gerar()">Gerar</button> <div id="output"></div> </form> </div> </body> </html> <!-- end snippet -->