title: javascript - create image element and randomly place within div in html5
body: <p>In my html document I have a div with id="containerRight". In the same directory where the html document is I have an image that needs to be added to the html. Using javascript I want to add 5x the same image into the div and scatter them randomly within the div. I'm struggling with adding 5x the same image from the hdd and positioning them randomly within the div. I have tried this so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  function insert_picture(){
  var newPicture = document.createElement("img");
  var destinationParent = document.getElementByID("containerRight");
  destinationParent.appendChild(newPicture);
  }
  
  function ImgRandomPosition()
  {
      var left = generateRandom();
      var top = generateRandom();
  var image = insert_picture();
  var imagestyle = document.getElementById("imgRight").style;
  imagestyle.position = "absolute";
  imagestyle.top = top;
  imagestyle.left = left;
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onclick="insert_picture()"&gt;
  &lt;div id="containerRight"&gt;
  &lt;img id="imgRight" src="smiley.png" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>