Showing an item in a shopping cart I'm updating and old project from jQuery 1.4 to jQuery 1.7.

Can this be simplified, thus reducing the amount of code, and perhaps in such reduction, have it improved?

Having the following code:

var cartItemDel   = '&lt;td class="del"&gt;&lt;img src="components/themes/default/img/icons/cross-small.png" width="16" height="16" alt="X"&gt;&lt;input type="hidden" class="lid" name="lineID'+ id +'" value="'+ id +'"&gt;&lt;span class="hidden token"&gt;'+token+'&lt;/span&gt;&lt;/td&gt;',
    cartItemName  = '&lt;td&gt;&lt;input class="CartItemId" type="hidden" name="id_'+ id +'" value="'+ id +'"&gt;&lt;span class="CartItemName"&gt;'+ name +'&lt;/span&gt;&lt;/td&gt;',
    cartItemPrice = '&lt;td&gt;&lt;input class="CartItemRef" type="hidden" name="ref_'+ ref +'" value="'+ ref +'"&gt;&lt;span class="class="CartItemPrice"&gt;&lt;span class="lineSum"&gt;'+ price +'&lt;/span&gt;&amp;euro;&lt;/span&gt;&lt;/td&gt;';

$(".cart-table tbody")
    .append('&lt;tr&gt;'+cartItemDel+cartItemName+cartItemPrice+'&lt;/tr&gt;');


I've updated it to:

/*
 * ADD NEW LINE - First TD
 */
var $newLineIcon = $("&lt;img/&gt;", {
        src    : "components/themes/default/img/icons/cross-small.png",
        width  : "16",
        height : "16",
        alt    : "X"
    });

var $newLineLID = $("&lt;input/&gt;", {
        type  : "hidden",
        class : "lid",
        name  : "lineID"+ lid,
        value : lid
    });

var $newLineToken = $("&lt;span/&gt;", {
        class : "hidden token",
        text  : token
    });

var $newLine_firstTD = $("&lt;td/&gt;", { class : "del"})
    .append($newLineIcon)
    .append($newLineLID)
    .append($newLineToken);

/*
 * ADD NEW LINE - Second TD
 */
var $newLinePID = $("&lt;input/&gt;", {
        type  : "hidden",
        class : "CartItemId",
        name  : "id_"+ id,
        value : id
    });

var $newLinePNAME = $("&lt;span/&gt;", {
        class : "CartItemName",
        text  : name
    });

var $newLine_secondTD = $("&lt;td/&gt;")
    .append($newLinePID)
    .append($newLinePNAME);

/*
 * ADD NEW LINE - Third TD
 */
var $newLinePREF = $("&lt;input/&gt;", {
        type  : "hidden",
        class : "CartItemRef",
        name  : "ref_"+ ref,
        value : ref
    });

var $newLinePPRICE = $("&lt;span/&gt;", {
        class : "CartItemPrice",
        html  : "&amp;euro;"
    })
    .prepend($("&lt;span/&gt;", {class : "lineSum", text : price}));

var $newLine_thirdTD = $("&lt;td/&gt;")
    .append($newLinePREF)
    .append($newLinePPRICE);

$("&lt;tr/&gt;")
    .append($newLine_firstTD)
    .append($newLine_secondTD)
    .append($newLine_thirdTD)
    .appendTo($(".cart-table tbody"));
Your code looks OK to me, very clear and organised.

It's more important to minify your code to decrease load time. There's a whole bunch of minification tools on the Internet.