Bootstrap dynamic dropdown items I'm trying to create a function for a dynamic dropdown. I have done it this way and it works, but I want to make my code cleaner.

 function renderRowCounter() {

    var rowCount = [25, 50, 100];
    var first = rowCount[0];
    var items = '';

    $.each(rowCount, function(i,v) {
        items += "&lt;li&gt;&lt;a href=\"#\"&gt;" + v + "&lt;/a&gt;&lt;/li&gt;";
    });

    return  "&lt;div class=\"btn-group btn-group-sm\"&gt;" +
            "&lt;button type=\"button\" data-toggle=\"dropdown\" class=\"btn btn-default dropdown-toggle\"&gt;" + first + " &lt;span class=\"caret\"&gt;&lt;/span&gt;&lt;/button&gt;" +
            "&lt;ul class=\"dropdown-menu\"&gt;" + items +
            "&lt;/ul&gt;" +
            "&lt;/div&gt; ";
}
Looks pretty clean for me.

2 things:


I'm not an English expert, but check the name of the function and the action. 
I understand "render" as to "display on the screen", or "write on the screen," but the function doesn't really write to the screen. It returns some template to be injected later.
Instead of using a concatenated string, you can use a template engine to avoid concatenating strings. It separates the logic from the template and makes both more maintainable. The most popular ones are Mustache, Handlebars, and the Backbone engine.