title: JavaScript button onclick function using DOM and appendChild
body: <p>I've been trying to make a simple script, but I got stuck. It should work like this:
  User click the <code>ADD button</code> to add field for creating question, after that, user can click <code>ADD ONE OPTION button</code>, in order to create additional blank textareas below the question.</p>
  
  <p><a href="http://jsfiddle.net/fUms2/5/" rel="nofollow">This is the FIDDLE</a></p>
  
  <p>It's not working. Even I make an ADD button work, somehow, the other button stops, I got smth like <em>Cannot call method 'appendChild' of null.</em></p>
  
  <p>This is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="submit" value="ADD" onclick="addquestion();" /&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div id="below"&gt;&lt;/div&gt;&lt;br/&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>n=1;
  function addquestion() {
          var textarea = document.createElement("textarea");
          textarea.name = "question[" + n + "]";
          var addone = document.createElement("input");
          addone.type = "button";
          addone.value = "Add one option";
          addone.onclick = "insertbelow("+n+")";
          var div = document.createElement("div");
          div.innerHTML = n + ". Question:  &lt;br /&gt;" + textarea.outerHTML + "&lt;br /&gt;" + addone.outerHTML + "&lt;br /&gt;&lt;div id=\"radiodown"+n+"\" &gt;&lt;/div&gt;&lt;hr/&gt;&lt;br/&gt;";
          document.getElementById("below").appendChild(div);
          n++;
  }
  
  function insertbelow(index) {
      var option = document.createElement("textarea");
      option.name = "rad["+index+"]";
      var optiondiv = document.createElement("div");
      optiondiv.innerHTML = option.outerHTML + "&lt;br/&gt;";
      document.getElementById("radiodown"+index).appendChild(optiondiv);
  }
  </code></pre>