Creating <td> elements with customer behavior on the fly in jQuery
<p>Just getting started with jQuery, and I've had some success so far. I've created a handler that updates a &lt;table&gt; every time a user makes a selection from a dropdown. It looks mostly like this:</p>

<pre><code>function loadAttributes() {
$.ajax({
    type: "POST",
    url: "../ws/itemSearch/getAttributesForItemType",
    contentType: 'application/xml',
    data: '&lt;soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.itemsearch.foo.com/"&gt;'
          + '&lt;soapenv:Header/&gt;&lt;soapenv:Body&gt;&lt;ser:getAttributesForItemType&gt;'
          + '&lt;arg0&gt;' + this.value + '&lt;/arg0&gt;'
          + '&lt;/ser:getAttributesForItemType&gt;&lt;/soapenv:Body&gt;&lt;/soapenv:Envelope&gt;',
    processData: false,
    dataType: "xml",
    success: function(data) {
        var attributes = '&lt;table summary="Attribute Section"&gt;&lt;tr class="underline"&gt;';

        var attCount = 0;

        $(data).find("return").each(
            function() {
                if (++attCount % 4 == 0) {
                    attributes += '&lt;/tr&gt;&lt;tr class="underline"&gt;';
                }

                // TODO PMA click handler to the new &lt;td&gt; element
                attributes += '&lt;td&gt;' + this.textContent + '&lt;/td&gt;';
            }
        );

        attributes += '&lt;/tr&gt;&lt;/table&gt;';

        $("div[id=attributes]").html(attributes);
    }
});
}
</code></pre>

<p>As you can see my next step is to not just add literal &lt;td&gt; elements to the row containing the attributes, but to add a click handler to them. This click handler would append the contents of the &lt;td&gt; to a text box; something like:</p>

<pre><code>tdItem.click(function() {
    $("input[name=search]").append(tdItem.textContent);
}
</code></pre>

<p>To do that, I'd prefer to create each td item as a separate Element and build up the table in an object-oriented manner using &lt;tr&gt; elements rather than pasting together a literal string which is what I'm doing now. Most of the examples on the jQuery site have to do with adding listeners to existing elements and not to building up a new section of the document like this on the fly every time. At the very least, can someone point me to a good tutorial on how to accomplish what I'm trying to do here?</p>
