Is there a better way to append these elements with jQuery?

Question

I have this long line of code that appends several elements with the jQuery .append() method.

$('#file-names-js').append("<tr><td>"+fileName+"</td><td><input class='pull-right main-radio' onchange='Product.uncheck($(this));' name='product[images_attributes]["+formNum+"][main]' type='radio' "+checked+"></td><td><a class='close' onclick='Product.removeImage($(this), "+formNum+");' href='#'>×</a></td></tr>");

I tried separating the elements with commas and having them on separate lines (so it would be less hideous) by because they are nested within a <tr>. So, when they were separated it would generate an empty <tr></tr> before the other elements which caused issues.

TO CLARIFY: By better I mean more readable

I am sure the OP means more readable. keep the html in a separate file, I always find it more convenient. — Jesse, Feb 21 '14 at 17:09
To clarify, I mean better as in readable, sorry for the late response — Snubber, Feb 21 '14 at 17:31
A possible solution : http://stackoverflow.com/revisions/21940488/2. — , Feb 21 '14 at 17:36
Thank you, I like your solution the best, could you post it as an answer? — Snubber, Feb 21 '14 at 18:30
@Snubber Gladly :) http://stackoverflow.com/a/21942655/1636522 — , Feb 21 '14 at 18:52

score 2 · Answer 1 · answered Feb 21 '14 at 17:12

$('<tr>')
    .append( '<td>' ).text(filename)
    .append( '<td>' ).addClass('pull-right main-radio').attr( 'name', product.images_attributes[formNum].main ).click( function(){ some code })
    .append( '<td>' ).append( 
        $('<a>').attr( 'href', '#' ).addClass('close').click( function(){ some code } ));

This psudo-code won't compile, but you get the idea. Feel free to edit if I have the syntax wrong, but I think the spirit of the question was how can I make my code look better and therefore be more maintainable.

score 1 · Answer 2 · answered Feb 21 '14 at 17:29

i would consider another way by seperating your html from your javascript code. As a suggestion in your specific case, maybe by using an ajax request and some simple php code is the way you can achieve this with code that is easier to read and way better to control.

For example you have something like a php template which receives your variables from your javascript, put it in your table and return it to your script for further actions.

stuff.php:

<?php
$filename = isset($_POST['filename']) ? $_POST['filename'] : '';

$html = '<table>
            <tr>
                <td>'.$filename.'</td>
            </tr>
        </table>';

return $html;
?>

now, if you want to append your table to your element, you just fire an ajax call to retrieve the table and if successful, append it to your element like this:

$.ajax({
    type: 'post',
    url: 'stuff.php',
    data: 'filename='+fileName,
    success: function(data) {
        $('#file-names-js').append(data);
    }
});

this is of course simplified and just an example. you should read about ajax first if you dont know it. hope it helps a bit.

score 1 · Accepted Answer · edited May 23 '17 at 10:31

You might be interested in this as well : https://stackoverflow.com/a/21902582/1636522.

$('#file-names-js').append(
    '<tr>' +
        '<td>' + fileName + '</td>' +
        '<td><input ' +
            'class="pull-right main-radio" ' +
            'onchange="Product.uncheck($(this));" ' +
            'name="product[images_attributes][' + formNum + '][main]" ' +
            'type="radio" ' + 
            checked + 
        '></td>' +
        '<td><a ' +
            'href="#" ' +
            'class="close" ' +
            'onclick="Product.removeImage($(this), ' + formNum + ');"' +
        '>×</a></td>' +
    '</tr>'
);

score 1 · Answer 4 · answered Feb 21 '14 at 19:04

I'd start with something like this. This is only a sample and not the exact code that you've above. I'd also suggest you move those inline event handlers from your HTML.

var appendHTML = [
"<tr>",
    "<td>", fileName, "</td>",
    "<td>",
        "<input class='pull-right main-radio'  name='product[images_attributes][", formNum, "][main]' type='radio' ", checked, " />",
    "</td>",
    "<td>",
        "<a class='close' href='#'>×</a>",
    "</td>",
"</tr>"].join('');

$('#file-names-js').append(appendHTML);

Is there a better way to append these elements with jQuery?

4 Answers4