Introdução
Como já visto em Como escrever com Javascript, aprendemos a usar document.write() para escrever algum texto no html da página.
Hoje, não somente aprenderemos escrever um simples texto, mas vamos aprender a escrever detidamente uma tag no página HTML.
Estamos falando de fazer com que o document.write(), ao invés de escrever um simples texto, escreva alguns itens (tags) do html.
Para tirar maior proveito da nossa matéria, sugiro que você faça testes utilizando-se de um documento html.
Escrevendo uma tag com javascript
Abaixo, podemos ver um simples exemplo, que se trata da tag <div> com um texto dentro
<script type="text/javascript">
<!--
document.write("<div>estou dentro de uma div escrita num html</div>");
//-->
</script>
<!--
document.write("<div>estou dentro de uma div escrita num html</div>");
//-->
</script>
Faça seu teste e não seja preguiçoso.
Crie seu documento html e cole o nosso javascript nele para visualizar o resultado.
Escrevendo tags com atributos
Vale lembrar que, além de elementos html, também é possível escrever o css que é usado dentro das tags.
Sendo assim, para ficar mais fácil ainda, vamos usar um exemplo onde a tag escrita (<div>) ficará com uma cor de fundo, facilitando assim a localização visual da mesma.
assim:
<script type="text/javascript">
<!--
document.write("<div style='background-color: black;color:white;'>estou dentro de uma div escrita em html</div>");
//-->
</script>
<!--
document.write("<div style='background-color: black;color:white;'>estou dentro de uma div escrita em html</div>");
//-->
</script>
Através do CSS dentro da div escrita pelo 'document.write', definimos, portanto, que a cor de fundo (background-color) será preta, e a cor da letra (color), branca.
O resultado agora é bem mais visível do que antes, e você tem a prova concreta de que o javascript não escreveu o texto e ignorou as tags.
Escrevendo tags com vários atributos
Também é possível utilizar outros atributos dentro da tag (o do próprio html e também o próprio CSS).
por exemplo:
<script type="text/javascript">
<!--
document.write("<div id='exemplo' style='background-color: red;' height='100' >estou dentro de uma div escrita em html</div>");
//-->
</script>
<!--
document.write("<div id='exemplo' style='background-color: red;' height='100' >estou dentro de uma div escrita em html</div>");
//-->
</script>
Uso correto das aspas (comuns e duplas) ao escrever
É importante nunca se esquecer de usar aspas comuns ('), ao invés de aspas duplas("), quando for escrever o atributo aplicado a tag dentro de document.write, já que as aspas duplas já são utilizadas para o comando document.write reconhecer o que será escrito.
Se não tiver jeito de usar somente aspas comuns porque você quer usar um atributo que exige também as duplas, você pode colocar a barra invertida antes da aspas duplas que você for usar no atributo.
exemplo:
<script type="text/javascript">
<!--
document.write("<div onclick=\"getElementById('apenasexemplo').href;\">estou dentro de uma div escrita em html</div>");
//-->
</script>
<!--
document.write("<div onclick=\"getElementById('apenasexemplo').href;\">estou dentro de uma div escrita em html</div>");
//-->
</script>
Escrever um javascript usando document.write
Sim, é possível!
Você pode fazer com que document.write(), que já está dentro de uma tag script, escreva outra tag script.
assim:
<script type="text/javascript">
<!--
document.write("<script type='text/javascript'>document.write('estou dentro de uma tag script escrita por outro script');<\/script>");
//-->
</script>
<!--
document.write("<script type='text/javascript'>document.write('estou dentro de uma tag script escrita por outro script');<\/script>");
//-->
</script>
Note que na tag de fechamento do script foi usado uma barra invertida antes da comum. Isso serve pra que a barra comum (/) seja interpretada e escrita por document.write. Do contrário, pode acontecer falhas (pelo menos comigo já aconteceu).
Gostou dessa matéria? Deixe seu comentário abaixo e dê sugestões!
Marcadores: javascript