JavaScript输出不正确的HTML

Question

我在使用这个实时消息系统时遇到了问题。由于某种原因，JavaScript没有正确呈现html元素<p>标记。但是，该消息应该出现在未指定的<p>标记中。它是在"<p class='text-left bg-primary'>" "</p>"和"<p class='text-left bg-success'>" "</p>"中没有消息的情况下呈现的。请注意，这些类与Twitter Bootstap相关联。当我检查html元素时，这就是渲染的内容：

因此，正确的<p>标记未使用data.message呈现，但它还会生成另外两个不需要的<p>标记，其中一个标记具有所需的消息。为什么JavaScript会输出多个<p>代码，而且不会将data.message放在正确的<p>代码中？代码如下。我也尝试使用Bootstap类的代码并遇到了同样的问题。

var data = JSON.parse(message.data);
var username = '{{ request.user.username }}';
var sender_username = data.sender_username;
var content = "";
var newdiv = "";
// See if there's a div to replace it in, or if we should add a new one
var existing = $("div[data-message-id=" + data.id + "]");

if(sender_username == username)
{
    console.log(sender_username);
    content = "<p class='text-left bg-primary'>" + data.message + "</p>";
    console.log(data.id);
    if (existing.length)
    {
        console.log("sender div to replace");
        existing.html(content);
    }
    else
    {
        newdiv = $("<div class='message' data-message-id='" + data.id + "'>" + content + "</div>");
        $("#messages").append(newdiv);
        console.log("sender no existing div");
    }
}
else
{
    content = "<p class='text-left bg-warning'>" + data.message + "</p>";
    if (existing.length)
    {
        console.log("receiver div to replace");
        existing.html(content);
    }
    else
    {
        newdiv = $("<div class='message' data-message-id='" + data.id + "'>" + content + "</div>");
        $("#messages").append(newdiv);
    }
}

Answer 1

data.message很可能是html，看起来像'<p>div test 9</p>'，它会关闭包含类的p标记。如果文本来自cms并且用户在使用wysiwyg编辑器时添加了返回结尾，则最后一个空p标记很常见。

你可以删除所有的html：

if(sender_username == username)
{

    //strip all of the html tags and return only the text
    var message = $('<div />').html(data.message).text();

    content = "<p class='text-left bg-primary'>" + message + "</p>";

    if (existing.length)
    {
        console.log("sender div to replace");
        existing.html(content);
    }
    else
    {
        newdiv = $("<div class='message' data-message-id='" + data.id + "'>" + content + "</div>");
        $("#messages").append(newdiv);
        console.log("sender no existing div");
    }
}
else
{
    content = "<p class='text-left bg-warning'>" + data.message + "</p>";
    if (existing.length)
    {
        console.log("receiver div to replace");
        existing.html(content);
    }
    else
    {
        newdiv = $("<div class='message' data-message-id='" + data.id + "'>" + content + "</div>");
        $("#messages").append(newdiv);
    }
}