下面是我的示例代码，供您参考：

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>

我在容器的类名中添加了"right"和"left"。
因此，我可以根据"position"属性选择适当的容器来存储新内容。