Jquery heavy concatenation

Question

Consider the following code snippet about Twitter API. data.followers_count didn't work if placed in anchor tags. There's some simple concatenation problem I can't fix because of the many brackets. Any help is greatly appreciated.

function(data){
   $('#twitter').html( document.getElementById('twitter').innerHTML + twitterusername[i] + ' ' +
   <a href='someURL' title='someTitle'>data.followers_count</a> + ' Followers' + '<br/>');
}

Created demo for you here http://jsfiddle.net/vqnFA/6/ , Select any country from drop down and you will see the difference, hope this helps, like the guys correctly pointed you missing quotes around anchor tag, cheers! — Tats_innit, Mar 21 '12 at 02:14
You can append on the div, there's no need to substitute everything. — vascop, Mar 21 '12 at 02:15

score 5 · Answer 1 · answered Mar 21 '12 at 02:11

Not sure if you've accidentally posted code with missing quotes but best guess from what you've posted.

function(data)
{
    $('#twitter').append( twitterusername[i] + 
      "<a href='someURL'title='someTitle'>" +
      data.followers_count + "</a> Followers<br/>");
}

score 3 · Answer 2 · answered Mar 21 '12 at 02:11

I don't know if it got lost copying and pasting, but you are not quoting your a tag, it should be something like:

function(data) {
   $('#twitter').html( document.getElementById('twitter').innerHTML + twitterusername[i]
     + ' ' + "<a href='someURL' title='someTitle'>" + data.followers_count
     + '</a> Followers<br/>');
}

Joseph · Accepted Answer · 2012-03-21T03:37:22.693

2

just break them up to simple parts

function(data) {

    //twitter container and it's original HTML
    var twitter = $('#twitter');
    var twitterHTML = twitter.html();

    //your link
    var link = $('<a></a>').attr('href', 'someUrl').text(data.followers_count);

    //everything in an array and joined into a string
    var newHtml = [twitterHTML, twitterusername[i], ' ', link, ' Followers<br/>'].join('');

    //put back in
    twitter.html(newHtml);
}

and presto! no concatenations and no plus signs!

alternatively much shorter solution (i just cleaned code and didn't notice it was an append operation):

function(data) {

    //build the link
    var link = $('<a></a>').attr('href', 'someUrl').text(data.followers_count);

    //build the HTML
    var newHtml = [twitterusername[i], ' ', link, ' Followers<br/>'].join('');

    //append HTML
    $('#twitter').append(newHtml);
}

edited Mar 21 '12 at 03:37

answered Mar 21 '12 at 02:19

Joseph

117,725
30
181
234

Very interesting and clean solution :) – George Mar 21 '12 at 02:24
1

Whoever downvoted this clean solution is very jealous. Haters gonna hate. – George Mar 21 '12 at 02:34
For what it's worth: have a look at the following http://jsperf.com/jquery-append-vs-html bear in mind that calling .html() twice will result in up to double the time required. Some other interesting reading: http://stackoverflow.com/questions/3015335/jquery-html-vs-append . Declaring four vars in redundant, Array jQuery methods are faster than .concat() and the likes of but will never amount to native concatenation "+" and is it fair to say no concats when an array is being used. Finally (referring to the second link: the number of evaluations carried out by jQuery is astronomical. – CBusBus Mar 21 '12 at 03:02
Don't get me wrong it is easy on the eyes but painfully redundant. I mean no offence by the down vote but from a practical point of view it is deserving of the vote. – CBusBus Mar 21 '12 at 03:05
It's not just about efficiency, you've got to consider what is good practice, what would be considered competent coding from a professional standpoint and many other factors. Working code doesn't mean that it's good code or indeed a suitable answer. Imagine after a while people see this code and that it's the accepted answer, they start writing code like this and before you now it this starts popping up in source everywhere. Point being that one should never skip critical thinking, especially when offering insight to others. – CBusBus Mar 21 '12 at 03:19
I don't think I follow your response. You've taken my comments and improved your code based on them yet my comments are wrong? The OP asked for help, not clean code; shouldn't you have written messy code (same weak rhetoric). Your first code wasn't very good and your second is still packing redundancies, accept that someone used the voting system as intended and become a better person for it. Finally array.join() over "+" was all good < '08, things have changed. – CBusBus Mar 21 '12 at 10:55

Jquery heavy concatenation

3 Answers3