title: Creating tables dynamically in jQuery
body: <p>I'm building some <code>&lt;table&gt;</code> data dynamically using jQuery, but I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3</p>
  </blockquote>
  
  <p>This happens at the appendTo part of a script that looks like this:</p>
  
  <pre><code>$('&lt;tr /&gt;').append(
      /* lots of stuff */
  ).add(
  $('&lt;tr /&gt;')
  ).append(
      /* some more */
  ).appendTo($tbody);
  </code></pre>
  
  <p>Where <code>$tbody</code> is <code>$('&lt;tbody /&gt;');</code></p>
  
  <p>Can anyone help me out please? For the sake of completeness, this is the entire code:</p>
  
  <pre><code>$('#visitsContainer').show();
  
  $div = $('&lt;div /&gt;').css('margin-top', '7px').css('width', '620px').addClass('groupBox');
  $table = $('&lt;table /&gt;').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620');
  $tbody = $('&lt;tbody /&gt;');
  $('&lt;tr /&gt;').append(
      $('&lt;td /&gt;').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append(
          $('&lt;a /&gt;').attr('href', '/sparkx/' + userData.username).append(
                  $('&lt;img /&gt;').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px')
          )
      ).add(
      $('&lt;td /&gt;').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append(
          $('&lt;a /&gt;').attr('href', '/sparkx/' + userData.username).append(
              $('&lt;strong /&gt;').text(userData.fullname)
          ).add(
              $('&lt;br /&gt;')
          ).add(
              userData.city)
          )
      ).add(
      $('&lt;td /&gt;').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append(
          $('&lt;a /&gt;').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append(
              $('&lt;img /&gt;').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px')
          ).append(
              'Stuur bericht')
          )
      ).add(
      $('&lt;td /&gt;').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append(
          $('&lt;b /&gt;').text(
              'Geplaatst op:')
          ).append(
              ' ' + posted
          )
      ).add(
      $('&lt;td /&gt;').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append(
          (month &gt; 0 ?
              $('&lt;b /&gt;').text('Was hier:')
              :
              $('&lt;div /&gt;').css('width', '1px').html('&amp;nbsp;')
          )).append(month &gt; 0 ? ' ' + months[month] + ' ' + year : '')
      )
  ).add(
      (rating &gt; 0 ?
          $('&lt;tr /&gt;').append(
              $('&lt;td /&gt;').attr('colspan', '4').append(
                  $('&lt;strong /&gt;').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append(
                      (rating == 3 ?
                          $('&lt;i /&gt;').text('een aanrader ').add(
                          $('&lt;img /&gt;').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px')
                          )
                      : (rating == 2 ? 
                          $('&lt;i /&gt;').text('een aanrader ').add(
                          $('&lt;img /&gt;').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px')
                          )
                      :
                          $('&lt;i /&gt;').text('slecht ').add(
                          $('&lt;img /&gt;').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px')
                          )
                      ))
                  )
              )
          )
      : '')
  ).add(
      (content ?
          $('&lt;tr /&gt;').append(
              $('&lt;td /&gt;').attr('colspan', '4').append(
                  $('&lt;div /&gt;').css('width', '100%').text(content).add(
                  $('&lt;div /&gt;').css('float', 'right').css('clear', 'both').append(
                      $('&lt;a /&gt;').attr('href', '/guide/editreaction/' + id).append(
                          $('&lt;b /&gt;').text('edit')
                      ).add(
                      $('&lt;a /&gt;').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append(
                          $('&lt;b /&gt;').text('delete')
                      ))
                  ))
              )
          )
      : '')
  ).appendTo($tbody);
  $tbody.appendTo($table);
  
  $table.appendTo($div);
  $div.prependTo($('#visits'));
  </code></pre>