title: jQuery appendTo with some data = append element without data
body: <p>I'm using jQuery, I have a simple list</p>
  
  <pre><code>&lt;ul id="list"&gt;
   &lt;li data-kind="foo"&gt;Foo1&lt;/li&gt;
   &lt;li data-kind="foo"&gt;Foo2&lt;/li&gt;
   &lt;li data-kind="foo"&gt;Foo3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>in which I want to add this new element</p>
  
  <pre><code>&lt;li data-kind="foo"&gt;Foo4&lt;/li&gt;
  </code></pre>
  
  <p>I think this code should do the job</p>
  
  <pre><code>new_foo = jQuery('&lt;li/&gt;').data('kind', 'foo').text('Foo4');
  new_foo.appendTo(jQuery('#list'));
  </code></pre>
  
  <p>but it works only half, it correctly adds the new &lt;li&gt; with 'Foo4' inside but it doesn't add the data-kind to the &lt;li&gt;</p>
  
  <p>Checking in Chrome console I see that new_foo HAS data-kind="foo" but actually I can't see it in Chrome inspector and if I try in console to do</p>
  
  <pre><code>$('#list').find('li')
  </code></pre>
  
  <p>I see all items with data-kind EXCEPT the freshly added one.</p>
  
  <p>Any idea why appendTo seems to ignore data fields?</p>
  
  <p>Thank you!</p>
  
  <p><strong>EDIT1</strong>
  Thanks to Gautam3164's suggestion I saw that using append() instead appendTo() it works. It seems that appendTo() doesn't preserve data attributes while append() does</p>
  
  <p><strong>EDIT2</strong>
  Fixed error in my code example, there was a 'message' variable but it was 'new_foo' one</p>
  
  <p><strong>EDIT3</strong>
  I need the presence of data-kind="foo" because I have a checkbox (with 'filter_switch' class) to show/hide items having data-kind="foo". When I was using .data() it didn't work with freshly created items, while using .attr() it works as expected.</p>
  
  <p>Code is something like:</p>
  
  <pre><code>jQuery('.filter_switch').click(function(){
   elem = jQuery(this);
   if (elem.prop('checked')) {
    jQuery('li[data-kind="' + elem.data('kind') + '"]:hidden').show();
   } else {
    jQuery('li[data-kind="' + elem.data('kind') + '"]:visible').hide();
  }
  </code></pre>
  
  <p>Thank you very much to everybody, this was my first question on stackoverflow and you were all amazing and very helpful! :)</p>