title: How to disable a dynamically created <li> element?
body: <p>i have created <code>&lt;ul&gt;</code> containing three <code>&lt;li&gt;</code>.i want to make disable one of my <code>&lt;li&gt;</code> on certain condition and insert some text in other <code>&lt;li&gt;</code> but failed.!</p>
  
  <p><strong><code>code</code></strong></p>
  
  <pre><code>var d = document.createElement('div');
      d.className = "dataTables_paginate paging_bootstrap pagination";
      var UL = document.createElement('ul');
      var L1 = document.createElement('li');
      L1.className = 'prev';
      var A1 = document.createElement('a');
      A1.appendChild(document.createTextNode('← Previous'));
      A1.id = 'B1';
      L1.appendChild(A1);
      UL.appendChild(L1);
      var L3 = document.createElement('li');
      L3.className = 'active';
      var A3 = document.createElement('a');
      A3.appendChild(document.createTextNode('1'));
      L3.appendChild(A3);
      UL.appendChild(L3);
      d.appendChild(UL);
      var L2 = document.createElement('li');
      L2.className = 'next';
      var A2 = document.createElement('a');
      A2.appendChild(document.createTextNode('Next →'));
      L2.appendChild(A2);
      A2.id = 'B2';
      UL.appendChild(L2);
     var root = document.getElementById('rose');
     root.appendChild(d);
  </code></pre>
  
  <p>i want to B1 disable. i have tried following code:</p>
  
  <p><strong><code>script</code></strong></p>
  
  <pre><code>  $('#B1').attr("disabled", true);
  </code></pre>