title: Javascript 'innerHTML' Method Overwriting Checkbox Selection
body: <p>I have a form, <code>id="myForm"</code> or <code>document.forms[0]</code>, with checkbox inputs, which I am writing dynamically with the help of Javascript functions and another HTML form, <code>id="addForm"</code> or <code>document.forms[1]</code>, which has a text box and a clickable button.</p>
  
  <p>The myForm is:</p>
  
  <pre><code>&lt;form id="myForm" action="Save.php" method="post"&gt;
      &lt;div id="skillSet"&gt;&lt;/div&gt;
      &lt;input type="submit"&gt;    
  &lt;/form&gt;
  </code></pre>
  
  <p>My addForm is:</p>
  
  <pre><code>&lt;form id="addForm"&gt;&lt;input id="skillAdd" type="text" name="newSkillName"&gt;
      &lt;input class="button" type="button" value="Add" onClick="addSkill(document.forms[1].newSkillName.value)"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and my javascript function addSkill() is:</p>
  
  <pre><code>function addSkill(newSkill)
  {
      if(newSkill.length &gt; 0)
      {
          var inner = document.getElementById("skillSet").innerHTML;
          var newSkillDefinition = ('&lt;div class="skillName"&gt;&lt;label&gt;&lt;input type="checkbox" checked name="skill[]" value="' + newSkill + '" title="Toggle Selection"&gt;' + newSkill + '&lt;/label&gt;&lt;/div&gt;');
          document.getElementById("skillSet").innerHTML = inner + newSkillDefinition;
      }
  }
  </code></pre>
  
  <p>All right, so I'll give you guys a scenario:
  Using <code>addForm</code>, i've added 5 checkbox items to myForm, all 5 are checked by default of course, because of the checkbox "checked" attribute. But i decide to uncheck 3 of them. After this, I add another checkbox item. As soon as i do that, ALL of my previous checkbox items get checked automatically. So my previous selection has all vanished!</p>
  
  <p>I know this definitely has something to do with the "checked" attribute and also innerHTML that I am using.</p>
  
  <p>It's been a real headache. Is there any fix or way around this problem?</p>