title: appendChild() to dynamically add images to a specific div
body: <p>I've just finished the codeacademy course on javascript so forgive my total lack of knowledge.</p>
  
  <p>I'm attempting to create the classic bar game 1-4-24 (also called past midnight or after midnight) using javascript and html. (Here's a <a href="http://www.kickstarter.com/projects/ibeninja/past-midnight-1-4-24-ios-turn-based-game-take-2-re" rel="nofollow">video</a> that shows the game for those of you who don't know what it is.</p>
  
  <p>So far I've created a function that rolls the dice and stores them in an array. In a previous version of this code I was able to appendChild(img) those results in image form to the body of the page. However, I needed to be able to remove those results for when the user rolls the dice again. </p>
  
  <p>I decided to use divs to separate the rolled dice, the dice the user kept and the menu used for rolling the dice.</p>
  
  <p>My problem is this: I need to display the results of the die rolls in this new div. I have been very, very unsuccessful - mostly because I don't fully understand how appendChild() works even after reading multiple posts on W3schools and other sites.</p>
  
  <p>So here's my code - look specifically in the addImageRolled function - I don't necessarily want it "fixed", I want to know how I can fix it. This is a learning project for me.</p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
  &lt;title&gt;Put your title here&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  &lt;script&gt;
      // variables
      var diceLeft = 6;
  
      // arrays
  
      var rolls = [];
      var kept = [];
  
      // functions
  
      // rolls dice
      function rollDice() {
          for (var i = 0; i &lt; diceLeft; i++) {
          rolls[i] = 1 + Math.floor(Math.random() * 6);
          };
              displayRoll();
      };
  
      // creates images for displayRoll function
      function addImageRolled(id, src, width, height, hspace) {
      var img = document.createElement("img");
      img.id = id;
      img.src = src;
      img.width = width;
      img.height = height;
      img.hspace = hspace;
      img.onmouseup= keepDie();
      document.getElementById("Rolled").appendChild(img);
  
      };
  
      // displays images based on rolls
      displayRoll() {
          switch(roll[0]) {
          case 1: addImageRolled(1, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(1, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(1, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(1, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(1, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(1, "dice-6.png", 100, 100, 5);
          break;
          };
  
          switch(roll[1]) {
          case 1: addImageRolled(2, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(2, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(2, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(2, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(2, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(2, "dice-6.png", 100, 100, 5);
          break;
          };
  
          switch(roll[2]) {
          case 1: addImageRolled(3, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(3, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(3, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(3, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(3, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(3, "dice-6.png", 100, 100, 5);
          break;
          };
  
          switch(roll[3]) {
          case 1: addImageRolled(4, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(4, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(4, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(4, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(4, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(4, "dice-6.png", 100, 100, 5);
          break;
          };
  
          switch(roll[4]) {
          case 1: addImageRolled(5, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(5, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(5, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(5, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(5, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(5, "dice-6.png", 100, 100, 5);
          break;
          };
  
          switch(roll[5]) {
          case 1: addImageRolled(6, "dice-1.png", 100, 100, 5);
          break;
          case 2: addImageRolled(6, "dice-2.png", 100, 100, 5);
          break;
          case 3: addImageRolled(6, "dice-3.png", 100, 100, 5);
          break;
          case 4: addImageRolled(6, "dice-4.png", 100, 100, 5);
          break;
          case 5: addImageRolled(6, "dice-5.png", 100, 100, 5);
          break;
          case 6: addImageRolled(6, "dice-6.png", 100, 100, 5);
          break;
          };
      };
  
  &lt;/script&gt;
  
  &lt;div class="content"&gt;
      &lt;div class="Menu"&gt;
          &lt;div class="content"&gt;
              &lt;p&gt;How to play: Click "Roll!" button to roll the dice. Click on any die to keep                 it.&lt;/p&gt;
              &lt;input type = "button" value = "Roll!" onClick = rollDice()&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Rolled" class="Rolled"&gt;
          &lt;div class="content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Kept"&gt;
          &lt;div class="content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>