title: How to create my elements in chat using JavaScript
body: <p>I'm developing a chat, and I need to create the elements using JavaScript, but I don't have a lot of knowledge about JavaScript, so every time I try, it goes wrong, and I believe this is because of the CSS classes too, it makes it harder for me, I would like someone to help me with this</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-css lang-css prettyprint-override"><code>body {
    background-color: black;
  }
  
  .chat {
    width: calc(100% - 20px);
    height: 500px;
    /* border: solid 1px pink; */
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 0 auto 0 auto;
    overflow: auto;
  }
  
  .messages {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }
  
  .message {
    border-radius: 20px;
    padding: 4px 15px;
    margin-top: 1px;
    margin-bottom: 1px;
    display: inline-block;
  }
  
  .yours {
    align-items: flex-start;
  }
  
  .yours .message {
    margin-right: 25%;
    background-color: purple;
    position: relative;
  }
  
  .yours .message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: -7px;
    height: 20px;
    width: 20px;
    background: purple;
    border-bottom-right-radius: 15px;
  }
  
  .yours .message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 20px;
    background: black;
    border-bottom-right-radius: 10px;
  }
  
  .mine {
    align-items: flex-end;
  }
  
  .mine .message {
    color: white;
    margin-left: 25%;
    background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    background-attachment: fixed;
    position: relative;
  }
  
  .mine .message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: -8px;
    height: 20px;
    width: 20px;
    background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    background-attachment: fixed;
    border-bottom-left-radius: 15px;
  }
  
  .mine .message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: -10px;
    width: 10px;
    height: 20px;
    background: black;
    border-bottom-left-radius: 10px;
  }
  
  .yours .user {
    font-size: 0.6em;
    color: grey;
    margin: 0px 0px 0px 10px;
  }
  
  .mine .user {
    font-size: 0.6em;
    color: grey;
    margin: 0px 10px 0px 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chat"&gt;
    &lt;div class="mine messages"&gt;
      &lt;div class="user"&gt;&lt;span&gt;Me&lt;/span&gt;&lt;/div&gt;
      &lt;div class="message last"&gt;
        Dude
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="yours messages"&gt;
      &lt;div class="user"&gt;&lt;span&gt;Mark&lt;/span&gt;&lt;/div&gt;
      &lt;div class="message"&gt;
        Hey!
      &lt;/div&gt;
      &lt;div class="message"&gt;
        You there?
      &lt;/div&gt;
      &lt;div class="message last"&gt;
        Hello, how's it going?
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mine messages"&gt;
      &lt;!-- &lt;div class="user"&gt;Me&lt;/div&gt; --&gt;
      &lt;div class="message"&gt;
        Great thanks!
      &lt;/div&gt;
      &lt;div class="message last"&gt;
        How about you?
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="yours messages"&gt;
      &lt;div class="user"&gt;&lt;span&gt;Anne&lt;/span&gt;&lt;/div&gt;
      &lt;div class="message"&gt;
        Hello!
      &lt;/div&gt;
      &lt;div class="message"&gt;
        How are you?
      &lt;/div&gt;
      &lt;div class="message last"&gt;
        Glad to see you?
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mine messages"&gt;
      &lt;!-- &lt;div class="user"&gt;Me&lt;/div&gt; --&gt;
      &lt;div class="message"&gt;
        Great thanks!
      &lt;/div&gt;
      &lt;div class="message last"&gt;
        How about you?
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>How can I create this elements using JavaScript?</strong></p>