создать новый div для существующего div его атрибута innerhtml

Question

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

<div style="margin-left:8px;" class="bubbledLeft" style="padding-left:5px;" id="chats-container"></div> 

<div style="margin-right:8px;" class="bubbledRight" style="padding-left:5px;" id="chats-container2"></div> 

Это образец Javascript, что придает текст в DIV с помощью его атрибута innerhtml

function fetchAllChats() { 
     ..... 
     xhr.open('GET', encodeURI('/get-all-chats')); 
     xhr.onload = function (response) { 
      try { 
       if (xhr.status === 200) { 
        var json = JSON.parse(response.target.responseText); 
        var chats_container = document.getElementById('chats-container'); 
        var chats = ''; 
        ..... 
        chats_container.innerHTML = chats; 
       } else { 
        alert('Request failed. Returned status of ' + xhr.status); 
       } 
      } catch (e) { 
       console.log(e); 
      } 
     }; 
     xhr.send(); 
    } 

Моя задача показано ниже

FromA : hi 

      FromB : hello 

Если типы FromA как вы снова в ответ это что происходит

FromA: hi 
     how do you do 
       FromB: hello 

Вы можете видеть, что вместо того, чтобы создать новый ДИВ и прикрепление входящий текст ниже текст, который идет FromB: привет он прыгает и присоединяет к содержанию FromA. Пожалуйста, как мне справиться с этим прямо с помощью либо Javascript или CSS

Answer 1

Вы подключаете все сообщения document.getElementById('chats-container'), который является первым ДИВ вы перечислили.

Что вам нужно сделать, это проверить json[i].user.name против зарегистрированного пользователя и использовать соответствующий класс для внутреннего div.

HTML:

<div id="chats-container"></div> 

В функции:

var theUser = "Myself"; // replace with logged in user 
var chats = '', theClass; 
for (var i = 0; i < json.length; i++) { 
    theClass = json[i].user.name == theUser ? "rightBubble" : "leftBubble"; 
    chats += '<div class="' + theClass + '"><strong>' + json[i].user.name + ':</strong> <span>' + json[i].message + '</span></div>'; 
} 
document.getElementById('chats-container').innerHTML = chats; 

Результат:

<div id="chats-container"></div> 
    <div class="leftBubble">...</div> 
    <div class="rightBubble">...</div> 
    ... 
</div> 

Answer 2

Вы можете искать appendChild функции:

chats_container.appendChild(<<THE NEW CHAT MESSAGE DIV>>);