title: How to append / add a element onclick using javascript?
body: <p>I am trying to append a new child when user clicks on a button. The new child is already defined with few CSS properties. Is it possible to do so ? I have tried a few codes, the best i could do is -</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>var body = document.querySelector('body');
  var bubbles = document.createElement("span")
  
  function a1click(){
        var size = Math.random() * 100;
        bubbles.style.width = 100 + size+'px';
        bubbles.style.height = 100 + size+'px';
        body.appendChild(bubbles);     
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin: 0;
      padding: 0;
  }
  #a1{
      position: relative;
      top: 250px;
      left: 100px;
      width: 30px;
      height: 150px;
      border: 2px solid #fff;
      background: rgb(0, 0, 0);
      float: left;
      cursor: pointer;
      perspective: 600;
  }
  span{
      position: absolute;
      top: 120px;
      left: 60%;
      width: 50px;
      height: 50px;
      background: black;
      animation: tweek 1s linear;
      transform-origin: top;
      pointer-events: none;
  }
  @keyframes tweek {
      0% {
        transform: rotate(90deg) translate(300px);
      }
    
      100% {
        transform: rotate(0deg) translate(250px);
        opacity: 0;
      }
    }</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;link rel="stylesheet" href="style.css"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onkeydown="keypress(event)"&gt;
      &lt;div id="a1" onclick="a1click()"&gt;&lt;/div&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This was good uptil here but the problem is that when we click button the box is getting appended continously, i want it to append only once if the button is clicked once if twice then again and so on.. Please help me..Any help will be appreciated.</p>