title: Move Divs Randomy JS
body: <p>I should dynamically create 10divs and move them randomly. I have created the divs and I can see them in console but not on screen. Only one div is visible. Maybe I have missed CSS property?</p>
  <p>Please help.</p>
  <p>Thank you!</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>create.addEventListener('click' , () =&gt; {
      let divs = document.createElement("div")
      let ParentDiv = document.getElementById("parent")
      let w = innerWidth
      let h = innerHeight
      divs.style = `
      width:50px; height:50px; background:red; border-radius:50%;
      position:absolute`
      for(let i = 0 ; i &lt;= 10 ; i++){
          console.log(divs)
          ParentDiv.append(divs)
      }
      let RandomPlace = setInterval( () =&gt;{
          let innwidth = Math.floor(Math.random() * w)
          let innheight = Math.floor(Math.random() * h)
          divs.style.top = innwidth + "px"
          divs.style.left = innheight + "px"
      },1000)
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          #parent{
              width:100%;
              height: 700px;
              overflow: hidden;
              background: rgb(122, 119, 119);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="create"&gt;Create&lt;/button&gt;
      &lt;div id="parent"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>