title: innerHTML basic, adding numbers in loop
body: <p>I have trouble with javascript. I want to make it so that if I click on the adding candy button. It states There are 2 candy. If I click again it says There are 3 candy. What is the fastest way to do it using innerHTML? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function add() {
    var d = document.getElementById('idd').innerHTML;
    d = d + '&lt;li&gt;There is a candy&lt;/li&gt;';
    document.getElementById('idd').innerHTML = d;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;h1&gt;Adding&lt;/h1&gt;
    &lt;p&gt;&lt;input type="button" value="adding candy" onclick="add();"&gt;&lt;/p&gt;
    &lt;ul id="idd"&gt;
      &lt;li&gt;There is a candy.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is giving me a head ache all day long. </p>