Inserir texto em div com JavaScript

Front-end

23/04/2013

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:

<!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ê

Carlos Andriê

Curtidas 2

Melhor post

Joel Rodrigues

Joel Rodrigues

23/04/2013

Fala, Carlos.
Troque o innerText por innerHTML e veja se dá certo.
GOSTEI 1

Mais Respostas

Carlos Andriê

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?
GOSTEI 0
Joel Rodrigues

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.
GOSTEI 0
Carlos Andriê

Carlos Andriê

23/04/2013

Muito bom. Obrigado mais uma vez.
Esta questão está resolvida e muito bem explicada.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

23/04/2013

Que bom, Carlos.
Então estou marcando este tópico como Concluído.
Abraço.
GOSTEI 0
POSTAR