How to dynamically create HTML elements in JavaScript

Question

I have an HTML page and I want to show the chat content between two person, the chat box is like this:

let data = {
  "lyrics": [{
      "line": "line 1 start",
      "position": "r",
      "time": 4.5
    },
    {
      "line": "answer 1",
      "position": "l",
      "time": 9.03
    },
    {
      "line": "line 2 start",
      "position": "r",
      "time": 14.01
    }
  ]
}

<!-- right chat -->
<div class="chat__conversation-board__message-container reversed">
  <div class="chat__conversation-board__message__person">
    <div class="chat__conversation-board__message__person__avatar">
      <img src="./customer.jpg" alt="Dennis Mikle" />
    </div>
    <span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
  </div>
  <div class="chat__conversation-board__message__context">
    <div class="chat__conversation-board__message__bubble">
      <span>some text</span>
    </div>
  </div>
</div>

<!-- left chat -->
<div class="chat__conversation-board__message-container">
  <div class="chat__conversation-board__message__person">
    <div class="chat__conversation-board__message__person__avatar">
      <img src="./agent.jpg" alt="Monika Figi" />
    </div>
    <span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
  </div>
  <div class="chat__conversation-board__message__context">
    <div class="chat__conversation-board__message__bubble">
      <span>some text</span>
    </div>
  </div>
</div>

I get the data.json from the server and display it on index.html and I want to create the element with position type (left=l or right=r) inside my body.

Answer 1

Here is my example code for your reference:

let data={
    "lyrics": [
        {
            "line": "line 1 start",
            "position": "r",
            "time": 4.5
        },
        {
            "line": "answer 1",
            "position": "l",
            "time": 9.03
        },
        {
            "line": "line 2 start",
            "position": "r",
            "time": 14.01
        }
    ]
}

function go(){
    let container;
   data.lyrics.forEach(lyric=>{
    if (lyric.position === 'r') {
        container=document.querySelector(".right .chat__conversation-board__message__bubble");
    } else {
        container=document.querySelector(".left .chat__conversation-board__message__bubble");
    }
     container.innerHTML+="<div>"+lyric.line+"</div>";
   })
   
}

<div class="chat__conversation-board__message-container reversed right">
  <div class="chat__conversation-board__message__person">
    <div class="chat__conversation-board__message__person__avatar">
      <img src="./customer.jpg" alt="Dennis Mikle" />
    </div>
    <span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
  </div>
  <div class="chat__conversation-board__message__context">
    <div class="chat__conversation-board__message__bubble">
      <span>some text</span>
    </div>
  </div>
</div>

<!-- left chat -->
<div class="chat__conversation-board__message-container left">
  <div class="chat__conversation-board__message__person">
    <div class="chat__conversation-board__message__person__avatar">
      <img src="./agent.jpg" alt="Monika Figi" />
    </div>
    <span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
  </div>
  <div class="chat__conversation-board__message__context">
    <div class="chat__conversation-board__message__bubble">
      <span>some text</span>
    </div>
  </div>
</div>

<button onclick="go()">
Go
</button>

I have added "right" and "left" to the class name of the containers.

So, I can base on the "position" attribute to select the appropriate containers to store the new content.