Обрабатывать разобранный JSON как HTML, а не как текст (отредактировано)

Рассмотрим этот простой код ниже

Когда я анализирую контент и получаю «txt» с помощью JSON.parse(e.data).choices[0].delta.content;, тогда все работает нормально, если это обычный текст. Однако в ответе есть несколько простых HTML-тегов, таких как <strong> и т. д., которые не отображаются в браузере как HTML.

Я не знаю, как передать это как есть. Я понимаю, что порции данных, когда они поступают, могут не иметь закрывающих HTML-тегов, а также могут содержать неполные HTML-теги, но когда поток заканчивается, обычно все в порядке.

Как гарантировать, что браузер обрабатывает содержимое «txt» как HTML, а не как текст? Переменная thisWebPath правильно настроена и возвращает потоковые данные обратно в формате JSON.

заранее спасибо

function sendMsg(msg) {

    var formData = new FormData();
    formData.append('msg', msg);
    formData.append('user_id', USER_ID);
    fetch(thisWebPath + '/send-message.php', {method: 'POST', body: formData})
        .then(response => response.json())
        .then(data => {
            let uuid = uuidv4()
            const eventSource = new EventSource(thisWebPath + `/event-stream.php?chat_history_id=${data.id}&id=${encodeURIComponent(USER_ID)}`);
            appendMessage(BOT_NAME, BOT_IMG, "left", "", uuid);
            const div = document.getElementById(uuid);

            eventSource.onmessage = function (e) {
                if (e.data == "[DONE]") {
                    msgerSendBtn.disabled = false;
                    document.getElementById("userSendButtonAV").value = "Send";
                    var elemB = document.getElementById("userSendButtonAV");
                    elemB.value = "Send";


                    document.getElementById('userMessageAV').placeholder='Enter your message now...';
                    document.getElementById('userMessageAV').disabled = false;
                

                    eventSource.close();
                } else {
                    
                    //original code  let txt = JSON.parse(e.data).choices[0].delta.content
                    if (isJsonString(e.data)) {
                        let txt = JSON.parse(e.data).choices[0].delta.content;

                    if (txt !== undefined) {
                        div.innerHTML += txt.replace(/(?:\r\n|\r|\n)/g, '<br>');
                    }
                } 
                        
            }
            };
            eventSource.onerror = function (e) {

                var elemC = document.getElementById("userSendButtonAV");
                elemC.value = "Send";

                
                msgerSendBtn.disabled = false;
                document.getElementById('userMessageAV').placeholder='Enter your message now...';
                document.getElementById('userMessageAV').disabled = false;
            
                //console.info(e);
                eventSource.close();
            };
        })
        .catch(error => console.error(error));


}

Я ожидаю, что текст будет обрабатываться как HTML.

Обновлено: вот как я сейчас добавляю сообщение

function appendMessage(name, img, side, text, id) {
    //   Simple solution for small apps
    const msgHTML = `
    <div class = "msg ${side}-msg">
      <!--- div class = "msg-img" style = "background-image: url(${img})"></div --->
      <div class = "msg-bubble">
        <div class = "msg-info">
          <div class = "msg-info-name">${name}</div>
          <div class = "msg-info-time">${formatDate(new Date())}</div>
        </div>

        <div class = "msg-text" id=${id}>${text}</div>
      </div>
    </div>
  `;

    if ( typeof(text) !== "undefined" && text !== null )  {
        msgerChat.insertAdjacentHTML("beforeend", msgHTML);
        msgerChat.scrollTop += 500;
    }
}

insertAdjacentText is a function, but that is even worse... it just writes out the entire text including the html code

Отредактировано еще раз:

Весь новый div попадает внутрь основного тега, например

    <main class = "msger-chat">
    </main>

И даже это генерируется динамически вместе с кучей других вещей, поэтому используется InsertAdjacentHtml.

Как я могу просто добавить контент с помощью InnerHtml, чтобы новый div, начинающийся со следующего, добавлялся в конец «основного» элемента»?

 <div class = "msg ${side}-msg">

Еще одно редактирование. Проблема заключается в типе контента «текст/поток событий», поэтому, очевидно, браузер обрабатывает его как текст :-( Я видел сеть проверки в Chrome

Даже если я добавлю к нему суффикс utf-8, браузер все равно будет воспринимать его как текст, а не как HTML. Я думаю это главный вопрос....