Question

document.getElementById("msg").innerHTML += "<b>Msg:</b> "+ msgs[i].childNodes[1].firstChild.nodeValue;

当我收到消息时，他们都聚集在一起。如何将每条消息放在一个单独的行上？

Answer 1

使用<br />或将内容置于<p>标记内，即可获得HTML中的换行符。

Answer 2

要在div中的每封邮件后添加换行符，您需要在函数中添加的每一行之后添加<br/>。这可以通过将其附加到您要添加的行的末尾来实现。在这种情况下，

"<b>Message:</b> " + msgs[i].childNodes[1].firstChild.nodeValue;

看起来像

"<b>Message:</b> " + msgs[i].childNodes[1].firstChild.nodeValue + "<br/>";

现在当div的innerHTML发生变化时，它会有一个换行符。

整个功能看起来像这样：

if(xhr) {
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                var value = xhr.responseXML;
                var msgs = value.getElementsByTagName('message');
                console.log("Processing ", msgs.length, "messages");

                for(var i = 0; i < msgs.length; i++) {
                    var id = parseInt(msgs[i].getAttribute("id"));
                    if(lastid < id) {
                        lastid = id;
                    }
                    document.getElementById("msg").innerHTML += "<b>Message:</b> "
                        + msgs[i].childNodes[1].firstChild.nodeValue
                        + "<br/>" // NOTICE THE BR TAG BEING ADDED
                        + "\n";   // Added an actual newline for human readability
                                  // in case you want to log/alert the actual html
                }
            }
        }
    }
}

这将以

的形式添加到html的div行

<b>Message:</b> message 1<br/>
<b>Message:</b> message 2<br/>
<b>Message:</b> message 3<br/>
...

将在浏览器中呈现，如下所示

消息：消息1
消息：消息2
消息：消息3
..

如何使用ajax添加新行

2 个答案: