Pinceladas da Web

Já vi pessoas utilizarem document.write para gerar uma página inteira, e sinceramente, isso é ridículo, sendo que existem opções mais limpas e cômodas. Utilizar JavaScript para fazer uma página inteira é uma coisa ridícula, mas caso seja necessário, aconselho a utilizar a DOM Tool.

DOM Tool se encarrefa de converter qualquer porção de HTML nas correspondentes chamadas JavaScript. Dessa forma, a criação de pequenas porções de HTML a partir de JavaScript serão mais rápidas de implementar.

Via: Anieto2K – DOM Tool, genera HTML mediante JS de forma fácil.

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, teremos 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