Yahoo visualizado em 4 navegadores
Foto por Sam Pullara

Javascript é uma linguagem de programação client-side, ou seja, é executada no navegador (do lado) do cliente. A vantagem de ser uma linguagem client-side, além de adicionar funcionalidade e dinâmica nas páginas, é o alivio de processamento e memória do servidor, e a desvantagem é que nem todos os navegadores interpretam o código da mesma maneira ou tem os mesmos recursos.

Compatibilidade entre os navegadores

Há pouco tempo era muito comum criar diferentes códigos Javascript que para suprir a necessidade de cada navegador. Isso significa trabalho em dobro, triplo, quádruplo (n navegadores). Sem mencionar a dificuldade de manutenir e atualizar esses códigos.

Com o grande crescimento de usuários, a busca por interatividade e inovação, os desenvolvedores de navegadores (Mozilla, Microsoft, Opera, Google, etc.) procuram tornar seu software mais compatível com os demais a cada versão, mas ainda há muitos problemas e não podemos perder uma parcela dos usuários porque uma aplicação em Javascript não funciona como devia.

createElement

Com o método createElement conseguimos criar elementos HTML em Javascript em tempo de execução (runtime).

var newElement = document.createElement("div");

Além de criar o elemento é possível definir seus atributos e eventos.

newElement.setAttribute("id", "abc");

A maior dificuldade esta em definir os atributos do elemento. O Internet Explorer aceita alguns valores que não funcionam no Mozilla Firefox, vice e versa, isso também ocorre com outros navegadores.

// IE
newElement.setAttribute("className", "style1");

// Firefox
newElement.setAttribute("class", "style1");

O atributo class é só um exemplo, mas existem muitos outros atributos que variam - eventos como onClick e onMouseover fazem parte do problema. No Internet Explorer é possível criar o elemento com todos seus atributos no método createElement.

if (browser == 'IE') {
	var newElement = document.createElement('<div class="style1" onclick="window.reload()">');

	var text = document.createTextNode("Atualizar");
	newElement.appendChild(text);
}
else {
	var newElement = document.createElement("div");
	newElement.setAttribute("class", "style1");
	newElement.setAttribute("onClick", "window.reload()");

	var text = document.createTextNode("Atualizar");
	newElement.appendChild(text);
}

Quanto mais pudermos evitar condições como essa, envolvendo a diferença de navegadores, melhor. Além de reduzir o tamanho do código, torna-o mais legível. A melhor opção de compatibilidade para criar elementos, inclusive para construir estruturas com mais de um elemento e texto, é o uso atributo innerHTML.

var newElement = document.createElement("div");
newElement.innerHTML = "<div class="style1" onclick="javascript: window.reload()">Atualizar</div>";

Funciona em ambos os navegadores (inclusive em outros como: Opera, Netscape, Safari, etc.). Note que foi criado um elemento que atua como container para armazenar os demais, de

<div class="style1" onclick="window.reload()">Atualizar</div>

para

<div>
	<div class="style1" onclick="window.reload()">Atualizar</div>
</div>

Neste caso, o uso do elemento container foi necessário pois a div que queremos criar tem atributos. Em outras situações onde não tem atributos no elemento base torna-se desnecessário a criação de um elemento container. Por exemplo:

var p = document.createElement("p");
p.innerHTML = "Texto com <b>negrito</b> e <b><em>negrito-itálico</em></b>";

O resultado obtido com innerHTML não tem comparação com o que temos de fazer para chegar no mesmo resultado com setAttribute e appendChild, sem contar que é possível construir estruturas HTML complexas em poucas linhas, talvez uma.

// Sem innerHTML
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");

if (browser == 'IE') {
	td.setAttribute("className", "style1");
}
else {
	td.setAttribute("class", "style1");
}

var text = document.createTextNode("Bem-vindo");

td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
document.getElementsByTagName("body")[0].appendChild(table);


// Com innerHTML
var container = document.createElement("div");
container.innerHTML = '<table><tr><td> class="style1">Bem-vindo</td>