javascript - jQuery append 不解析 HTML 标签

Question

过去似乎很多人都遇到过这个问题，但没有一个解决方案适合我。
我有一个在收到来自 POST 请求的响应后触发的方法:

        xhr.onload=function(e) {
                if(this.readyState === 4) {
            res = JSON.parse(e.target.responseText);

            var userHtml = '<p class="userText"><span>' + res.userText + "</span></p>";
            document.getElementById("chatbox").append(userHtml);

            var botHtml = '<p class="botText"><span>' + res.botText + "</span></p>";
            document.getElementById("chatbox").append(botHtml);

            document
              .getElementById("userInput")
              .scrollIntoView({ block: "start", behavior: "smooth" });
                }
        };

在“聊天机器人”中，这应该在右侧(对于 userText )和左侧(对于 botText )呈现文本气泡。但是，当此方法触发时，它只是将原始 HTML 附加到聊天框中，如下所示:

<p class="userText"><span>Hi, how are you.</span></p><p class="botText"><span>I'm fine thanks, how are you?</span></p>

有没有办法解决这个问题？
谢谢!

Answer 1

您需要使用 jQuery/append()功能不是 document.getElementById我已经添加了 methods下面你可以看到 $('#chatbox')正在解析 HTML 而 document.getElementById显示为普通 HTML/(原始)text 现场演示:

var res = {
  userText: 'bar',
  botText: 'foo'
}

var userHtml = '<p class="userText"><span>' + res.userText + "</span></p>";
document.getElementById("chatbox").append(userHtml);
$('#chatbox').append(userHtml)

var botHtml = '<p class="botText"><span>' + res.botText + "</span></p>";
document.getElementById("chatbox").append(botHtml);
$('#chatbox').append(botHtml)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">

</div>

使用 document.getElementById如果您热衷于使用 document.getElementById那么你需要使用 innerHTML像下面这样。
现场演示:

var res = {
  userText: 'bar',
  botText: 'foo'
}


var userHtml = '<p class="userText"><span>' + res.userText + "</span></p>";
document.getElementById("chatbox").innerHTML += userHtml;

var botHtml = '<p class="botText"><span>' + res.botText + "</span></p>";
document.getElementById("chatbox").innerHTML += botHtml;

<div id="chatbox">

</div>