I am facing issue when I try to insert space using .html() method in JQuery. Following is my code :

html += '<td >'+description+". "+location;
html += +" "+position;
html += +" &nbsp; "+side+'</td>'; 
$('#tempResult').html(html);

The result I am getting is as follows: Green Tint. 0FrontNaNRight

I am facing issue when I try to insert space using .html() method in JQuery. Following is my code :

html += '<td >'+description+". "+location;
html += +" "+position;
html += +" &nbsp; "+side+'</td>'; 
$('#tempResult').html(html);

The result I am getting is as follows: Green Tint. 0FrontNaNRight

• javascript
• jquery-ui
• jquery
• jquery-selectors

2 Answers 2

Remove the + operator from your string. += takes care of the string concatenation, so the additional + sign simply tries to make the string positive (causing the interpreter to change it to NaN - not a number).

a += b is a "shorthand way" (perhaps a simplification) of saying a = a + b.

html += '<td >'+description+". "+location;
html += " "+position;
html += " &nbsp; "+side+'</td>'; 
$('#tempResult').html(html);

The += + bit is doing some type conversion. Get rid of the 2nd +.

Another way of building html is via arrays and joining. One example:

var description = 'DESCRIPTION',
    location = 'LOCATION',
    position = 'POSITION',
    side = 'SIDE',
    html = [
        '<td>' + description,
        '. ' + location,
        ' ' + position,
        ' ' + side,
        '</td>'
    ];

$('#tempResult').html(html.join(''));