title: set/get dynamically custom attribute
body: <p>Major modern browsers support setting/retrieving custom attribute dynamically, except IE-family. How can I set/get my custom attribute in all browsers?</p>
  
  <p>This is what I've tried so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="myInput" type="text" /&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myInput = document.getElementById('myInput');
  myInput.setAttribute('custom-attr', 'custom-value');
  alert(myInput.getAttribute('custom-attr'));
  </code></pre>
  
  <p>or</p>
  
  <pre><code>var myInput = document.getElementById('myInput');
  var customAttr = document.createAttribute('custom-attr');
  customAttr.value = 'custom-value';
  myInput.setAttributeNode(customAttr);
  alert(myInput.getAttribute('custom-attr'));
  </code></pre>
  
  <p>In both cases IE <code>alert()</code> returns <code>null</code>.</p>