title: How to Add html element in data attribute
body: <p>I want to add whole html element to data attribute so that on click I can set it to localstorage and can use it on next pages as well instead of doing the same stuff again on next page ... <br></p>
  
  <p>Here is what I was doing...<br></p>
  
  <p>Checking if img_src has a value or not <br>
  if false than set a div with letter X and some styling<br>
  if true set img tag with src and some width and height</p>
  
  <pre><code>      var img_src="userpic.png"; //this value comes from db
        if(img_src=="" || img_src==null){
          var po_img = '&lt;div class="class-groupPic bg-1"&gt;X&lt;/div&gt;';
        }
        else{
          var po_img = '&lt;img src="'+element.student.photo+'" width="34" height="34"/&gt;';
        }
  
        &lt;div class="col" data-img="'+po_img+'" data-religion="Hindu" data-category="OBC"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Jquery on click<br></p>
  
  <pre><code>        $(".col").on('click',function(){
             window.localStorage.setItem('img',$(this).data('img'));
             window.localStorage.setItem('religion',$(this).data('religion'));
             window.localStorage.setItem('category',$(this).data('category'));            
          });
  </code></pre>
  
  <p>But this adding html inside data attirbute results<br>
  <a href="https://i.stack.imgur.com/ACUrd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ACUrd.png" alt="enter image description here"></a></p>
  
  <p>This above image is my html page result</p>