.appendTo and HTML literals

Question

element.appendTo('<td>').appendTo('<tr>').appendTo('#ordersList')

Is this supposed to put the element inside a new td element, inside a new tr element inside the #ordersList element (was a table)?

Because I was just getting the naked element inside #ordersList with no wrapping tr/td.

This old site I was trying to troubleshoot seems to be using jQuery 1.4.1 - in case this is a known bug.

It looks like it intends to do that; I'll be interested to see if it actually does anything at all (on my way to try it out). Seems like `$(').append($('').append(element)).appendTo('#ordersList')` would be more human readable and functional. — Kato, Apr 20 '12 at 16:39
@Kato I ended up removing the table and getting on with my life, but just trying to understand why this code was being rendered at all (browser forgiveness of garbage in tables) and what the original coder's intent was. — Cade Roux, Apr 20 '12 at 16:46
Me too; I'm devouring the answers and getting no work done while I fiddle. I think this is the difference between the person who wrote it and us; we want to know what makes it tick; they, ostensibly, didn't even want to know if what they wrote would run! ;) — Kato, Apr 20 '12 at 17:06

Matt · Accepted Answer · 2012-04-20T16:49:13.783

3

appendTo() returns the element you're operating on, so what you're actually doing is;

What would work would be something like this;

$('<td></td>').appendTo($('<tr></tr>').appendTo('#ordersList')).append(element);

... which sucks for readability.

edited Apr 20 '12 at 16:49

answered Apr 20 '12 at 16:38

Matt

I understand now. Cleaned it up and moved on by not using an outer table at all. – Cade Roux Apr 20 '12 at 16:51

score 1 · Answer 2 · answered Apr 20 '12 at 16:45

You can always use the native API for simple things like this, though a helper for code reduction is nice...

function create(type) { return document.createElement(type); }
function byId(id) { return document.getElementById(id); }

byId('ordersList')
    .appendChild(create('tr'))
    .appendChild(create('td'))
    .appendChild(element);

The native .appendChild() returns the element appended, so you can chain calls to nest elements.

2 Answers2