function createUserList(users) {
var $table = $('<div class="user-table">');
for (var i = 0; i < users.length; i++) {
if (i % 3 === 0) {
var $row = $('<div class="row">').appendTo($table);
}
$row.append(createUserBlock(users[i]));
}
return $table;
}
function createUserBlock(user) {
return $('<div>', {'class': 'user-block', 'text': user.name});
}
$('#main').append(createUserList(users));
Instead of querying and updating elements in the document with $('#row'+rowNum+' .span4 div') try to build a detached fragment, and insert it as one whole. The difference in speed is very noticeable on large data sets.
Try to access elements through variables. You can create a row and then store it in a variable $row, and then access it as $row.append(...). This is both easier to read and faster than $('#row'+rowNum+' .span4').append(...).
'<h2>'+userNickname+'</h2>' - there are several reasons why you shouldn't concatenate unescaped plain text with HTML, but the main reason is cross-site scripting. Imagine if some user's nickname is <script>location = 'http://pwned.com/'</script>. You probably don't want to allow someone to redirect your visitors to another site, or create fake login forms, or steal cookies. Here's how you can avoid that: $('<h2>').text(userName)