在不使用 .html 的情况下附加多个 HTML 元素

Question

我想在每次向服务器发送一条聊天消息时注入一条聊天消息。每条聊天消息都包含一个用户名、一个头像和一条消息。如何使用 jQuery 附加多个 HTML 元素？使用此代码，它可以工作，但我害怕使用 .html，因为现在用户可以发送类似"<i>Italic</i>" 的消息，该消息也显示为 HTML 以供其他用户使用。我只使用了一个元素 .text 解决了这个安全问题，但我只能包含一个非常简单的构造，而不使用头像或任何样式

$("#submit").click(function() {
    var username = '<%= user.name %>'; // Username is stored in Session, using EJS to set this
    var avatar = '<%= user.avatar_small %>'; // Avatar is stored in Session, using EJS to set this
    var message = $("#message").val(); // getting message from input field

    $("#chatList").append(
    $("<li class='list-group-item list-group-item-dark'></li>").html("<img src='"+avatar+"' alt='Avatar' /><label>"+username+":</label> "+message));

    // Socket.io used here to send information to the server
    socket.emit("message", {
        username: username
        message: message,
        avatar: avatar
    });
});

Answer 1

您必须对要设置其文本的元素中的每个元素进行文本转义：

const $li = $("<li class='list-group-item list-group-item-dark'><img alt='Avatar'><label></label></li>")
$li.find('img').prop('src', avatar);
$li.find('label').text(username + ':')
$li.append(document.createTextNode(message));
$("#chatList").append($li);