title: Using jquery to change <span> html to <tr>...</tr>
body: <p><em>Disclaimer: HTML, JQuery, Ajax skill level — rubbish. Always been a thick client person.</em></p>
  
  <p>I've got a form that allows the user to enter a customer code and an email address. I want to display the customer's name when the customer code is valid. I'll blunder my way through Ajax and Spring MVC to do that, but as a first step, I figured I'd use a jquery function to add a row to the table under the customer code. I can't get it to work, however.</p>
  
  <p>Here's my JSP:</p>
  
  <pre><code>&lt;%@include file="/common/header.jsp" %&gt;
  &lt;h1&gt;
      &lt;a href="/customerEmailList.do"&gt;&lt;spring:message code="customer.email.title"/&gt;&lt;/a&gt;
      &lt;span class="breadcrumb"&gt;&lt;spring:message code="ui.breadcrumb.separator"/&gt;&lt;/span&gt;
      &lt;spring:message code="action.add"/&gt;
  &lt;/h1&gt;
  &lt;form:form action="customerEmailAdd.do" commandName="customerEmailEntry"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;&lt;form:errors cssClass="error"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;spring:message code="customer.email.code"/&gt; &lt;span class="mandatory"&gt;*&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form:input id="customerCode" path="customerCode" maxlength="8" size="10"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form:errors path="customerCode" cssClass="error"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;span id="identifiedCustomer"&gt;
          &lt;/span&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;spring:message code="customer.email.edit.field"/&gt; &lt;span class="mandatory"&gt;*&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form:input path="emailAddress" maxlength="255" size="50"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form:errors path="emailAddress" cssClass="error"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;
                  &lt;hr/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3" align="right"&gt;
                  &lt;input type="submit" class="green-button" value="&lt;spring:message code="button.save"/&gt;"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form:form&gt;
  
  &lt;script type="text/javascript"&gt;
      $ ( document ).ready ( function () {
          $ ( '#identifiedCustomer' ).html ( '&lt;tr&gt;&lt;td&gt;Hello, world&lt;/td&gt;&lt;/tr&gt;' );
      } );    
  &lt;/script&gt;
  
  &lt;%@include file="/common/footer.jsp" %&gt;
  </code></pre>
  
  <p>jquery (1.8.3) is being pulled in via the common header.</p>
  
  <p>When the form loads, the text <em>Hello, world</em> is displayed, but it's not a new table row. It shows up before the table. I would have expected it to create a new row between the <code>customerCode</code> and <code>emailAddress</code> field rows.</p>
  
  <p>What have I done wrong?</p>