title: Create label for Checkbox inside element
body: <p>I try to make lines dynamically, the problem is when I add a checkbox with label  dynamically using javascript does not work. However the one I created with Html by default works correctly.</p>
  
  <p>In fact I want the image that I added (on.png / off.png) replaces the checkbox. When I do it only with html (checkbox + label) the code works, but now I only want to create the element with Javascript, I can chow the label but it when I click It's not work.</p>
  
  <p>This is all my code :</p>
  
  <p>Main.html</p>
  
  <pre><code> &lt;HTML&gt;
   &lt;HEAD&gt;
  &lt;TITLE&gt;  &lt;/TITLE&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;SCRIPT language="javascript"&gt;
      function addRow(tableID) {
  
          var table = document.getElementById(tableID);
  
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
  
          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "checkbox";
          element1.id =  "id2" ;
          cell1.appendChild(element1);
  
          // Create label
          var label = document.createElement("label");
          label.for =  "id2" ;
          cell1.appendChild(label);
  
          var cell2 = row.insertCell(1);
          cell2.innerHTML = rowCount + 1;
  
          var cell3 = row.insertCell(2);
          var element2 = document.createElement("input");
          element2.type = "text";
          cell3.appendChild(element2);
  
  
      }
  
      function deleteRow(tableID) {
          try {
          var table = document.getElementById(tableID);
          var rowCount = table.rows.length;
  
          for(var i=0; i&lt;rowCount; i++) {
              var row = table.rows[i];
              var chkbox = row.cells[0].childNodes[0];
              if(null != chkbox &amp;&amp; true == chkbox.checked) {
                  table.deleteRow(i);
                  rowCount--;
                  i--;
              }
  
          }
          }catch(e) {
              alert(e);
          }
      }
  
  &lt;/SCRIPT&gt;
   &lt;/HEAD&gt;
  &lt;BODY&gt;
  &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
  
  &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
  
  &lt;TABLE id="dataTable" width="350px" border="1"&gt;
      &lt;TR&gt;
          &lt;TD&gt;&lt;INPUT type="checkbox" name="chk"  id="id1" /&gt; &lt;label for="id1" &gt; &lt;/label&gt;   &lt;/TD&gt;
          &lt;TD&gt; 1 &lt;/TD&gt;
          &lt;TD&gt; &lt;INPUT type="text" /&gt; &lt;/TD&gt;
      &lt;/TR&gt;
    &lt;/TABLE&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code> input[type=checkbox] {
    display:none;
  }
  
   input[type=checkbox] + label
   {
     background: url(images/off.png) no-repeat;
     height: 64px;
     width: 64px;
     display:inline-block;
     padding: 0 0 0 0px;
   }
  
    input[type=checkbox]:checked + label
   {
      background: url(images/on.png) no-repeat;
      height: 64px;
      width: 64px;
      display:inline-block;
      padding: 0 0 0 0px;
    }
  </code></pre>
  
  <p>Help me please.</p>