Question

我一直在这个问题上没有头脑，并决定分享这个问题。我有一个聊天应用程序，包含两个不同发送方的div，如图所示

<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>

这是使用innerhtml属性

将文本附加到div的示例javascript

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

您可以看到，不是创建新的div并将传入的文本附加到 FromB：hello 的文本下面，它会跳转并附加到FromA的内容。请问我如何使用javascript或css

正确解决这个问题

Answer 1

您可能正在寻找appendChild功能：

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

Answer 2

您正在将所有邮件附加到document.getElementById('chats-container')，这是您列出的第一个div。

您需要做的是针对登录用户检查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>

为其innerhtml属性的现有div创建一个新div

2 个答案: