Fórum Inserir texto em div com JavaScript #440698
23/04/2013
0
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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ê
Curtir tópico
+ 2Post mais votado
23/04/2013
Troque o innerText por innerHTML e veja se dá certo.
Joel Rodrigues
Gostei + 1
Mais Posts
23/04/2013
Carlos Andriê
Mas sem querer abusar, você sabe me dizer o motivo? Qual a diferença entre essas duas funções?
Gostei + 0
23/04/2013
Joel Rodrigues
- 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
23/04/2013
Carlos Andriê
Esta questão está resolvida e muito bem explicada.
Gostei + 0
23/04/2013
Joel Rodrigues
Então estou marcando este tópico como Concluído.
Abraço.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)