Shefarol Soluções Web

Método createElement - Voltar

O método createElement cria um nó de elemento

Neste exemplo estaremos crianto o elemento link e adicionando seus atributos rel, type e href:

Escolha a cor da página

 

Exemplo do HTML
<p>Escolha a cor da página</p>
<ul>
	<li><a href="javascript:void(Verde())">Verde</a></li>
	<li><a href="javascript:void(Amarelo())">Amarelo</a></li>
	<li><a href="javascript:void(Azul())">Azul</a></li>
	<li><a href="javascript:void(Branco())">Branco</a></li>
</ul>

 

Exemplo do Javascript
function Verde(){
	var meuVerde = document.createElement('link');
	meuVerde.setAttribute('rel', 'stylesheet');
	meuVerde.setAttribute('type', 'text/css');
	meuVerde.setAttribute('href', 'verde.css');
	document.head.appendChild(meuVerde);
}

function Amarelo(){
	var meuAmarelo = document.createElement('link');
	meuAmarelo.setAttribute('rel', 'stylesheet');
	meuAmarelo.setAttribute('type', 'text/css');
	meuAmarelo.setAttribute('href', 'amarelo.css');
	document.head.appendChild(meuAmarelo);
}

function Azul(){
	var meuAzul = document.createElement('link');
	meuAzul.setAttribute('rel', 'stylesheet');
	meuAzul.setAttribute('type', 'text/css');
	meuAzul.setAttribute('href', 'azul.css');
	document.head.appendChild(meuAzul);
}

function Branco(){
	var meuBranco = document.createElement('link');
	meuBranco.setAttribute('rel', 'stylesheet');
	meuBranco.setAttribute('type', 'text/css');
	meuBranco.setAttribute('href', 'branco.css');
	document.head.appendChild(meuBranco);
}

 

Abaixo os arquivos CSS usados no exemplo:

Verde
Amarelo
Azul
Branco