title: create dynamic card content with jQuery
body: <p>Assume I have multiple div classes as below. 
  What I'm trying to do is that, when it is clicked 
  my function should have created card contents(card-title, input-group-text) inside the card-body. but my current function(createCard()) creates some text content outside of the card-body. need your kind help </p>
  
  <pre><code> &lt;!-- My ejs file --&gt;
  
   &lt;div class="col-sm-6"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;div class="card-body"&gt;
              &lt;div style="height: 255px;padding-top:86px;color:#e2e2e2;"&gt;
                &lt;i class="icon-plus icons font-2xl" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="createCard()"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- my js file --&gt;
  function createCard() {
      var x = document.createElement("FORM");
      x.setAttribute("id", "myForm");
      document.body.appendChild(x);
  
      var y = document.createElement("INPUT");
      y.setAttribute("type", "text");
      y.setAttribute("value", "Donald");
      document.getElementById("myForm").appendChild(y);
  }
  </code></pre>