Inserir texto em div com JavaScript
Olá, galera. Tudo em paz com vocês?
Estou aqui novamente com um probleminha. Tenho dois inputs HTML: txtTitulo e txtSubitulo. Tenho tambem um botão que ao clicar nele, vou pegar o texto dos dois inputs e jogar dentro de uma div que fica logo abaixo. Aí eu consegui, beleza.
Só que gostaria de aplicar uma formatação, tipo o título maior que o subtítulo.
Tentei usar um <h1>, mas ao invés de formatar como HTML, aparece o texto "<h1>". Lembrando que sou iniciante e estou estudando JavaScript, por isso essas dúvidas e exemplos tão bestas.
Meu código e o seguinte:
Desde já agradeço qualquer colaboração.
Estou aqui novamente com um probleminha. Tenho dois inputs HTML: txtTitulo e txtSubitulo. Tenho tambem um botão que ao clicar nele, vou pegar o texto dos dois inputs e jogar dentro de uma div que fica logo abaixo. Aí eu consegui, beleza.
Só que gostaria de aplicar uma formatação, tipo o título maior que o subtítulo.
Tentei usar um <h1>, mas ao invés de formatar como HTML, aparece o texto "<h1>". Lembrando que sou iniciante e estou estudando JavaScript, por isso essas dúvidas e exemplos tão bestas.
Meu código e o seguinte:
<!DOCTYPE html> <html> <head> <title>teste</title> <meta charset="UTF-8" /> <script type="text/javascript"> function gravar(){ var titulo = document.getElementById("txtTitulo").value; var subtitulo = document.getElementById("txtSubtitulo").value; var div = document.getElementById("divResultado"); div.innerText = "<h1>" + titulo +"</h1>"+ "\n" + subtitulo; } </script> </head> <body> <div> <label>Título:</label> <input type="text" id="txtTitulo"/> <label>Subtítulo:</label> <input type="text" id="txtSubtitulo"/> <button id="btnEnviar" onclick="gravar()" >Gravar</button> </div> <div id="divResultado"> </div> </body> </html>
Desde já agradeço qualquer colaboração.
Carlos Andriê
Curtidas 2
Melhor post
Joel Rodrigues
23/04/2013
Fala, Carlos.
Troque o innerText por innerHTML e veja se dá certo.
Troque o innerText por innerHTML e veja se dá certo.
GOSTEI 1
Mais Respostas
Carlos Andriê
23/04/2013
Opa! Valeu, Joel. Agora foi.
Mas sem querer abusar, você sabe me dizer o motivo? Qual a diferença entre essas duas funções?
Mas sem querer abusar, você sabe me dizer o motivo? Qual a diferença entre essas duas funções?
GOSTEI 0
Joel Rodrigues
23/04/2013
São duas propriedades (não funções) bem parecidas, mas com a seguinte diferença:
- innerText considera tudo que é atribuído a ela como texto, independente de colocar tags, elas serão apresentadas como puro texto.
- innerHTML considera que o texto atribuído a ela é um conteúdo HTML, que deve ser renderizado com tal. Assim, pode-se inserir tags HTML que elas serão apresentadas da forma convencional.
- innerText considera tudo que é atribuído a ela como texto, independente de colocar tags, elas serão apresentadas como puro texto.
- innerHTML considera que o texto atribuído a ela é um conteúdo HTML, que deve ser renderizado com tal. Assim, pode-se inserir tags HTML que elas serão apresentadas da forma convencional.
GOSTEI 0
Carlos Andriê
23/04/2013
Muito bom. Obrigado mais uma vez.
Esta questão está resolvida e muito bem explicada.
Esta questão está resolvida e muito bem explicada.
GOSTEI 0
Joel Rodrigues
23/04/2013
Que bom, Carlos.
Então estou marcando este tópico como Concluído.
Abraço.
Então estou marcando este tópico como Concluído.
Abraço.
GOSTEI 0