javascript - 在不使用 .html 的情况下附加多个 HTML 元素
问题描述
每次向服务器发送一条聊天消息时,我都想注入一条聊天消息。每条聊天消息都包含一个用户名、一个头像和一条消息。如何使用 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
});
});
解决方案
您必须对要设置其文本的每个元素进行文本转义:
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);
推荐阅读
- servicestack - 服务器重新连接成功时不会触发服务堆栈服务器 OnReconnect 事件
- c# - 如何表示和序列化需要重复键的数据结构?
- google-api - 使用 Google Places API,如何获取矩形区域中的所有地点?
- node.js - Mongoose 聚合管道每次返回不同的结果
- performance - 如何避免微服务中的非现实化?
- math - 如何求解以下方程组
- java - 如何以 ISO 8601 格式获取 orientdb3.0 中的日期时间属性
- css - 创建一个具有角度 9 和材质的水平可滚动“滑块”
- javascript - Node Js检查用户电子邮件是否已经退出
- java - 使用spring + mybatis时,java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Drive发生