Easy concatenation in Javascript

When developing stuff in Javascript and jQuery you often need to concat lots of HTML for output. That gets ugly pretty fast.

$("#mydiv").html('<div id="lightbox-container-image-data-box">' +
this.something + '<div id="lightbox-container-image-data"><div' +
'id="lightbox-image-details"><span id="lightbox-image-details-caption">' +
v + '</span><span id="lightbox-image-details-currentNumber"></span>' +
'</div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose">' +
'<img src="'+settings.imageBtnClose+'">');

There are a few different ways to concat strings in Javascript and make your code more readable.

Using the + operator:

var html = "<table>" +
    "<tr>" +
    "<td>" +
    "</td>" +
    "</tr>" +
    "</table>";

I don’t like this notation. To make it readable you need an extra space after the closing " and you can’t nicely line up all the strings.

Another way is using the Array.join("") method:

var html = [
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
].join("");

This has the disadvantage that you need a method at the end of the array, and in modern browsers it is a little slower than native concatting.

Another way is using the String.concat() method

var html = (new String("")).concat(
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
);

I especially like this last method. Unfortunately the syntax is a little clunky. My colleague Frank suggested a slightly different notation

var html = ''.concat(
    "<table>",
    "<tr>",
    "<td>",
    "</td>",
    "</tr>",
    "</table>"
);

This is valid because '' is equivalent to (new String(“”)). This works great and makes passing HTML as an argument to jQuery methods a lot more readable:

$("#mydiv").html(''.concat(
    '<table>",
    '<tr><td>',
    '</td></tr>',
    '</table>'
));

Het lijsttrekkersdebat

Vier jaar geleden schreef ik op deze plek een evaluatie van het lijsttrekkersdebat. Het is interessant om te zien hoe het politieke landschap zich nu manifesteert. Balkenende, Rutte en Wilders zitten nog steeds op hun plek, maar de verhoudingen zijn veranderd, ten gunste van de VVD, ten nadele van het CDA. Een evaluatie van de lijsttrekkers.

Het blijft knap hoe Emile Roemer zich in acht korte weken heeft geprofileerd als de opvolger van Jan Marijnissen. Zijn taal was duidelijk, eenvoudig en vaak origineler dan de andere deelnemers. Van de andere kant: zijn betoog over ‘de uitverkoop van de sociale sector’ werd wel erg vaak herhaald, misschien nog wel vaker dan de moslims van Wilders.

Femke Halsema positioneerde zich als het ultieme alternatief voor linkse besluitelozen. Voor sommige zwevers werkte dat misschien, maar ik kan me ook voorstellen dat kiezers dat juist een teken vinden van besluiteloosheid van haar kant.

André Rouvoet en Alexander Pechtold waren zo goed als onzichtbaar. Dat is vreemd, want beide zijn goede debaters.

Pechtold probeerde op te vallen door grappen te maken die geen van allen aankwamen. En de laatste oproep aan Rutte om toch vooral duidelijkheid te scheppen over Wilders als vice-premier was ook geen succes.

Jan Peter Balkenende zal zijn achterstand met dit debat niet goedmaken. Het enige wat een beetje aankwam was zijn verhaal over ‘wat een goede premier maakt’, de rest was zijn eeuwige stroom van verhaspelde woorden en dooddoeners als ‘u zegt het wel, maar het is niet zo’. Balkenende kan na dit debat definitief de handdoek in de ring gooien.

Geert Wilders was als altijd verbaal sterk, maar na 4 jaar alles te hebben gezegd wat er te zeggen valt over wat er fout is aan moslims is het een grijsgedraaide plaat geworden. Voor de eerste keer deed Wilders zenuwachtig aan, Rutte was hem op alle momenten de baas. En of het nou zo’n slim idee was om te zeggen dat hij als Minister-President als eerste naar Israël zou gaan?

Ondanks dat Job Cohen claimt dat hij ‘van zijn eerdere fouten in de campagne heeft geleerd’ was dat vanavond niet te merken. Wat hij zegt lijkt op de taal van Wouter Bos, maar hij doet het lang niet zo charismatisch en overtuigend. Hij klonk af en toe bijna, en dat is wel heel pijnlijk, als Ad Melkert, die zinnetjes opdreunde van zijn voorlichters. Dat is jammer, want op de momenten dat hij wat meer improviseerde was het een stuk beter. Hoe dan ook, met dit slappe optreden is Cohen naar mijn mening de verliezer van het debat.

Mark Rutte heeft de afgelopen vier jaar veel geleerd en was ontzettend kalm en duidelijk in het uitleggen van zijn standpunten.Het is knap hoe Rutte zijn VVD neerzet als een sociale partij die er ook voor de minder bedeelden is (of dat nou waar is of niet). Alleen de ‘morele oproep’ van Femke Halsema om aan te geven waar de pijnpunten van zijn programma zitten liet dat beeld even verwateren. Toch bleef het beeld overeind, en Rutte is daarom de winnaar van het debat.

» Een overzicht van alle artikelen vind je in het archief.

Hallo! Ik ben Hay. Ik maak kunst, doe projecten en blog hier. Lees verder »

Projecten

Meer Hay bij...

Archieven op maand