Skip to main content
Simplificando código, evidenciando detalhes
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
function Gerar() {
  var output = document.getElementById('output');
  output .innerHTML = '<table>';          // Primeiro usamos =
  output .innerHTML += '<tr>';            // depois += para acrescentar
  output .innerHTML += '<td>celula<'<td>CONTEUDO GERADO</td>';
  output .innerHTML += '</tr>';
  output .innerHTML += '</table>';
}
<body>
  <div id="titulo">
    <h1>Caça-Palavras</h1>
    <form>
      Conteudo preexistente da pagina<br>
      <button type="button" onClick="Gerar()">Gerar</button>
      <div id="output"></div>
    </form>
  </div>
</body>
</html>
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';'CONTEUDO GERADO';
  tr.appendChild(td);
  table.appendChild(tr);
  output.appendChild(table);
}
<body>
  <div id="titulo">
    <h1>Caça-Palavras</h1>
    <form>
      Conteudo preexistente da pagina<br>
      <button type="button" onClick="Gerar()">Gerar</button>
      <div id="output"></div>
    </form>
  </div>
</body>
</html>
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>
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>
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>';
}
<body>
  <form>
    Conteudo preexistente da pagina<br>
    <button type="button" onClick="Gerar()">Gerar</button>
    <div id="output"></div>
  </form>
</body>
</html>
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);
}
<body>
  <form>
    Conteudo preexistente da pagina<br>
    <button type="button" onClick="Gerar()">Gerar</button>
    <div id="output"></div>
  </form>
</body>
</html>
adicionou 292 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Problema 1:

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

Problema 2:

Da própria documentação da MDN:

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.

Problema 1:

Normalmente document.write é usado em JS para compor partes de uma página durante sua carga.

Problema 2:

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

Da própria documentação da MDN:

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.

adicionou 979 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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 HTMLconteúdo em um documento já existente é substituindo o conteúdo HTML de um elemento, por.

Para fins de exemplo desta formausaremos <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>

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:

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>';
}
<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>

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>

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>

adicionou 979 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando