Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

innerHTML com certeza foi uma mão na roda para os desenvolvedores durante muito tempo, e ainda hoje existe muita gente que o utiliza seja por não conhecer outras alternativas ou por pura preguiça.

Quais os problemas de utilizar innerHTML?

• innerHTML não é um padrão standard, é uma propriedade da Microsoft, e por isso já não é de se confiar muito.
• As aplicações baseadas no MIME Type application/xhtml+xml não suportam essa propriedade.
• A propriedade funciona como uma String, deixando de fora qualquer interação com o DOM que tentarmos introduzir.
• Ao tratar-se de uma cadeia de texto, tereos alguns problemas com acentuação, fechamento de tags, comentários na página.

Criando múltiplos elementos

A partir de um Array, vamos criar uma lista de elementos uitlizando innerHTML e depois usando DOM.

innerHTML:

data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0;i<data.length;i++) {
	mHTML+="<li>" + data[i] + "</li>";
}
mHTML+="</ul>";
document.getElementById("mContainer").innerHTML = mHTML;

Dessa forma definimos todo o HTML necessário para construírmos nossa lista, usando DOM seria dessa forma:

DOM:

data = new Array("one","two","three");
 // create the UL element that our LI elements will descend from
eUL = document.createElement(”ul”);
// loop over the length of the “data” array
for(i=0;i<data.length;i++) {
	// create an LI
	eLI = document.createElement(”li”);
	// append the value of data[i] to the LI as a text node
	eLI.appendChild(document.createTextNode(data[i]));
	// append the LI to the UL
	eUL.appendChild(eLI);
}
// append the UL to the “mContainer” element.
document.getElementById(”mContainer”).appendChild(eUL);

Referências

• Anieto2K - DOM como alternativa a innerHTML