title: jquery add data attribute while creating dynamic dom elements
body: <p>How to add data attribute while creating custom dynamic dom elements</p>
  
  <p>like  - </p>
  
  <pre><code>var div = $('#ajey');
  
    var text = "&lt;div class='parent'&gt;parent div";
  
    text +="&lt;div class='child' data-child='true'&gt;how do I add .data value for this div during on the fly dom creation?&lt;/div&gt;";
  
    text += "&lt;/div&gt;";
  
    div.html(text);
  </code></pre>
  
  <p>Fiddle here - <a href="http://jsbin.com/lanotu/1/edit" rel="nofollow">Demo</a></p>
  
  <p>Here I have added <code>data-child</code> this works, but when someone inspect elements via developer tools this is visible.</p>
  
  <p>Where as the if I add via jquery .data() the data is not visible in the developer console.</p>
  
  <p>But I am not able to figure out how to add data via jquery when I am creating elements on the fly.</p>