Capítulo 13

Propriedade innerHTML

JavaScript

<script type="text/javascript">
window.onload = function () {
var elTitulo = document.getElementById("tit");
var elParUm = document.getElementsByTagName("p")[0];
var elLink = document.getElementsByName("maujor");
var elMensagem = document.getElementById("msg");
var elBotao = document.getElementById("btn");	
var textoTit = elTitulo.innerHTML; 	
	
	elBotao.onclick	= function() {
		elParUm.innerHTML = "Mudei o texto desse parágrafo";
		elParUm.style.background = "yellow";
		elMensagem.innerHTML = "<h2>Título inserido com <code>innerHTML</code></h2>";
		elMensagem.innerHTML += "<h2>" + textoTit + "</h2>"; 
		elMensagem.innerHTML += "Recarregue a página para repetir";
		elMensagem.style.color = "red";
	}
}
<script>

HTML

...
<h2 id="tit">Título nível dois</h2>
	<p>Texto do primeiro parágrafo</p>
	<p>Texto do segundo parágrafo</p>
	
	<div id="msg"></div> 

<button type="button" id="btn">Rodar Script</button>
...

Título nível dois

Texto do primeiro parágrafo

Texto do segundo parágrafo