jQuery: append() for each element
<p>I have a table and a list:</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;
       &lt;td&gt;Jack&lt;/td&gt;
       &lt;td class="date"&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
       &lt;td&gt;David&lt;/td&gt;
       &lt;td class="date"&gt;&lt;/td&gt;
  &lt;/tr&gt;

  ...
&lt;/table&gt;

&lt;hr /&gt;

&lt;span class="inline-date"&gt;2012&lt;/span&gt;
&lt;span class="inline-date"&gt;2013&lt;/span&gt;
</code></pre>

<p>I want to append each <code>span.inline-date</code> to each <code>td.date</code> like this:</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;
       &lt;td&gt;Jack&lt;/td&gt;
       &lt;td class="date"&gt;&lt;span class="inline-date"&gt;2012&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;

  &lt;tr&gt;
       &lt;td&gt;David&lt;/td&gt;
       &lt;td class="date"&gt;&lt;span class="inline-date"&gt;2013&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;

  ...
&lt;/table&gt;
</code></pre>

<p>I tired:</p>

<p><pre>
  <code>
  $("span.inline-date").appendTo('table td.date');
  </code>
  </pre></p>

<p>But I get double <code>span</code> in each <code>td</code>.</p>

<p>I miss something? </p>
