javascript - 为什么 jQuery 似乎不向嵌套跨度添加文本？

Question

我已经尝试了几个不同的命令，但都不起作用。我这样开始:

var messageHtml = "<span class='message-bundle' id='" + randomId + "'></span>";
$(".visualizer").append(messageHtml);

randomId 是一个随机数。然后我为元素设置 top 和 left 定位(它设置为 position: absolute)。

然后我 .append() 将以下空 span 添加到此 span:

$(".message-bundle#" + randomId).append("<span class='usertag' id='" + randomId + "'></span><br/>" + 
                                        "<span class='message' id='" + randomId + "'></span>");

我最初将它们留空，因为我想清理它们的内容以防止 XSS 攻击。 到目前为止，一切都很好。然后我向这些嵌套 span 添加经过清理的文本。

$(".message-bundle .usertag#" + randomId).text(msgObj.usertag);
$(".message-bundle .message#" + randomId).text(msgObj.message);

这永远行不通。我尝试打印出这两个元素的 .text()，但它们包含空字符串。为什么是这样？在创建上面的 .usertag 和 .message 跨度(而不是使用 .text())时，我可以以某种方式清理字符串并内联添加它们吗？ ？

Answer 1

id 在整个文档中必须是唯一的，而您正在复制它们。不过，无论如何，这是对它们的不当使用；您应该更多地使用元素而更少地使用 HTML。

var message =
    $('<span>', { class: 'message-bundle' })
        .append($('<span>', { class: 'usertag', text: msgObj.usertag }))
        .append($('<span>', { class: 'message', text: msgObj.message }));

$('.visualizer').append(message);

这会附加元素，您可以从创建它们的那一刻起将其作为适当的对象进行操作，而不是在添加 HTML 后重新选择它们。