James James - 6 months ago 8
jQuery Question

jQuery adding a div after a generated table

I am sure i have the right logic here and tried after and insertafter but does not seem to work... any ideas?

JS:

if(content) {
var $table = $('<table/>');
$table.addClass('product-table');
$table.append(
'<tr><td><img src="' + content[0].image + '" class="thumbnail"/></td>' +
'<td><strong>' + content[0].title + '</strong></td>' +
'<td>SKU: ' + content[0].sku + '</td>' +
'<td>&pound;' + content[0].price + '</td></tr>'
);
$table.after('<div class="button-container">' +
'<a href="#">view cart</a>' +
'<a href="#">checkout</a>' +
'</div>');
$(notice_content).find(notice_inner).html($table);
}

Answer

after method requires that the target element ($table) be in DOM - which it isn't until next statement with .html method.

Just move line with after call after the line with html call:

$(notice_content).find(notice_inner).html($table);
$table.after('<div class="button-container"><a href="#">view cart</a><a href="#">checkout</a></div>');

Useful references:

http://api.jquery.com/after

Comments