MouseOver Studio

Durante o desenvolvimento de RegexPal, Steven Levithan notou que ao utilizar a propriedade innerHTML de um elemento se perde muito tempo limpando os elementos filhos em comparação a criação dos novos.

Conhecendo isso podemos combinar a velocidade de destruir elementos tirando o elemento pai ao utilizar os métodos do DOM com criar novos elementos utilizando innerHTML.

Foi assim que uma solução foi sugerida e devido a participação dos leitores nos comentários foi melhorada notavelmente. DrSlump percebeu que mesmo a função sendo bem mais rápida que o innerHTML no Firefox, no IE era mais lenta e recomendou uma compilação condicional. Por sua parte, Dean Edwards sugeriu a utilização do método cloneNode para poder transferir todos os atributos de um elemento pra outro. Ao final a função ficou assim:

function replaceHtml(element, html) {
	var oldElement =
			(typeof element === "string" ? document.getElementById(element): element);
	/*@cc_on // innerHTML puro e mais rápido em IE
		oldElement.innerHTML = html;
		return oldElement;
	@*/
	var newElement = oldElement.cloneNode(false);
	newElement.innerHTML = html;
	oldElement.parentNode.replaceChild(newElement, oldElement);
	/* Como acabamos de remover o elemento antigo do DOM, retornar uma referenca
	ao novo elemento, o qual pode ser utilizado para restaurar referencias da variable */
	return newElement;
};

Para testar os resultados podem acessar a página criada pelo mesmo Steven.