Vorige week kwam ik achter een leuk feitje, tenminste ik denk dat het een feitje is. Ik was bezig om een chatmodule te maken in een website en de gebruikers daar wilden ook ieder hun eigen kleurtje kunnen selecteren. Op zich geen probleem natuurlijk, dan kun je gewoon een span maken en daar een kleur aan geven.

Aangezien de tekst via AJAX werd ingeladen, moest ik de kleur ook via Javascript er in voegen. Niet zo heel erg lastig, toch ben ik er een behoorlijke tijd mee bezig geweest vind ik zelf. Wat was het (nou ja, een van de) probleem nou?
Blijkbaar sluit de innerHTML van Javascript je HTML tags in je tekst als je dit niet zelf doet in dezelfde regel als ze worden aangemaakt. Ik had dus code wat hier op lijkt:

if( kleur_node[0].firstChild != null) { chat_div.innerHTML += '<span>' chat_div.innerHTML += user_node[0].firstChild.nodeValue + ':' chat_div.innerHTML += text_node[0].firstChild.nodeValue + ''; }

De tekst bleef echter z’n normale kleur houden en niet de kleur die ik wilde. Uiteindelijk heb ik de code kleur_node[0].firstChild.nodeValue maar vervongen door Red, zodat ik zeker wist dat er een kleur werd geplaatst. Dit mocht echter niet baten. Hierna heb ik er maar een collega bij geroepen om mee te kijken, het zou kunnen dat ik iets over het hoofd zou hebben gezien. Samen hebben we er dit van gemaakt:

if( kleur_node[0].firstChild != null) { chat_div.innerHTML += '<span style="color: red;">Rode kleur' chat_div.innerHTML += user_node[0].firstChild.nodeValue + ':' chat_div.innerHTML += text_node[0].firstChild.nodeValue + ''; }

Nu werd de tekst Rode kleur wel gekleurd, maar de rest van m’n tekst niet. Via de IE Developer Toolbar heb ik toen maar de broncode van dat element bekeken om te kijken wat er precies werd gedaan. Wat bleek nou? De span die in de eerste regel staat, werd gelijk afgemaakt met een __in de eerste regel, dus na de Rode kleur. Logisch dat de rest van m’n tekst niet werd opgekleurd. Na veel zoeken en proberen ben ik dus tot de conclusie gekomen dat wanneer je HTML code’s in de innerHTML stopt, deze automatisch worden gesloten. Een handig weetje, maar je kunt hier zo een paar minuten zoet mee zijn. M’n uiteindelijke code is dit geworden.

if( kleur_node[0].firstChild != null) { chat_div.innerHTML += '<span>'+ user_node[0].firstChild.nodeValue + ':'+ text_node[0].firstChild.nodeValue + ''; }

Met deze code wordt alles gewoon goed opgekleurd.