为什么jQuery似乎没有向嵌套跨度添加文本？

Question

我在几个不同的命令中试过这个,但都没有用.我这样开始:

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

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

然后我.append()对以下空白spans span:

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

我最初将它们保留为空,因为我想针对XSS漏洞消毒它们的内容.到目前为止,一切都很好.然后我将清理过的文本添加到这些嵌套的跨度中.

$(".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后重新选择它们.