Adding HTML DOM template I'm new to JS and jQuery. I wrote this function which just does what I want, but it seems very unreadable, and because of my experience, I don't know a better way to handle it.

Could you please give advise me how to refactor it?

function new_section(id, name, order) {

    return $('&lt;tbody&gt;')
        .attr('id', 'section_' + id)
        .attr('data-id', id)
        .attr('data-order', order)
        .append($('&lt;tr&gt;')
            .addClass('head-row')
            .attr('id', 'section_' + id + '_head_row')
            .append($('&lt;td&gt;')
                .attr('id', 'section_' + id + '_name_cell')
                .attr('colspan', window.row_length)
                .text(name)
                .addClass('bg-info')

                .append($('&lt;a&gt;').addClass('edit-section').attr('href', '#')
                    .append($('&lt;i&gt;').addClass('fa fa-pencil text-muted')))

                .append($('&lt;span&gt;').addClass('pipe-edit-section text-muted').text('|'))

                .append($('&lt;a&gt;').addClass('section-up').attr('href', '#')
                    .append($('&lt;i&gt;').addClass('fa fa-chevron-up text-muted')))

                .append($('&lt;a&gt;').addClass('section-down').attr('href', '#')
                    .append($('&lt;i&gt;').addClass('fa fa-chevron-down text-muted')))

                .append($('&lt;span&gt;').addClass('pipe-edit-section text-muted').text('|'))

                 .append($('&lt;a&gt;').addClass('delete-section').attr('href', '#')
                    .append($('&lt;i&gt;').addClass('fa fa-times-circle text-muted')))

        )
    );
}


UPD:

Found underscore templates. What do you think about this approach:

section = _.template([
            '&lt;tbody id="section_&lt;%= id %&gt;" data-id="&lt;%= id %&gt;" data-order="&lt;%= order %&gt;"&gt;',
                '&lt;tr id="section_&lt;%= id %&gt;_head_row" class="head-row"&gt;',
                    '&lt;td id="section_&lt;%= id %&gt;_name_cell" class="bg-info" colspan="&lt;%= row_length %&gt;"&gt;',
                        '&lt;%= name %&gt;',
                        '&lt;a href="#" class="edit-section"&gt;',
                            '&lt;i class="fa fa-pencil text-muted"&gt;&lt;/i&gt;',
                        '&lt;/a&gt;',
                        '&lt;span class="pipe-edit-section text-muted"&gt;|&lt;/span&gt;',
                        '&lt;a href="#" class="section-up"&gt;',
                            '&lt;i class="fa fa-chevron-up text-muted"&gt;&lt;/i&gt;',
                        '&lt;/a&gt;',
                        '&lt;a href="#" class="section-down"&gt;',
                            '&lt;i class="fa fa-chevron-down text-muted"&gt;&lt;/i&gt;',
                        '&lt;/a&gt;',
                        '&lt;span class="pipe-edit-section text-muted"&gt;|&lt;/span&gt;',
                        '&lt;a href="#" class="delete-section"&gt;',
                            '&lt;i class="fa fa-times-circle text-muted"&gt;&lt;/i&gt;',
                        '&lt;/a&gt;',
                    '&lt;/td&gt;',
            '&lt;/tbody&gt;'].join('\n'));
There isn't much to refactor here and you already identified the problem scope. 

You are much better off with a JavaScript template engine. 

I won't be too opinionated here, but popular options are: 


http://handlebarsjs.com/
https://github.com/janl/mustache.js/
http://documentcloud.github.io/underscore/#template
http://ejohn.org/blog/javascript-micro-templating/