title: Creating <td> elements with customer behavior on the fly in jQuery
body: <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>