DOM como alternativa ao innerHTML
blog reactions Postado em: 17 de março de 2008 por Pedro RogérioinnerHTML 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);
