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
<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>
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);
}