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 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:
function Gerar() {
var 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>';
}
<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>
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):
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);
}
<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>