Question

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div id="hel"></div>
<script>
txt="<script>alert('Test');</script>";
var headerIcon = '<div>hi</div>';
var messageBox = $("<div class='textDiv'><span class='sp'></span></div>");

$(document).ready(function(){
messageBox.text(txt);
//$(".textDiv .sp").text(txt);
$('#hel').append(headerIcon,messageBox);

});
</script>
</body>
</html>

输出

hi
<script>alert("Test");</script>

但如果我使用$（“。textDiv .sp”）。text（txt）;而不是messageBox.text（txt）;输出只是嗨使用$（“。textDiv .sp”）时会出现什么问题.text（txt）;？

编辑：我不想注入html。我想只显示文本。但我只是想知道为什么messageBox.text（txt）;但是$（“。textDiv .sp”）。text（txt）;犯规

Answer 1

text()正在转义html标记，如果您需要在文档中插入html，然后使用html() http://api.jquery.com/html/

编辑：我相信$(".textDiv .sp").text(txt);无法正常工作，因为该元素尚未在该阶段注入DOM，而您正试图从DOM中选择它

尝试console.log( $(".textDiv .sp") )，看看会返回什么。

Answer 2

尝试这样的事情。据我了解，它应该有所帮助：

$(document).ready(function(){
   $('#hel').append(headerIcon,messageBox);
   $(".textDiv .sp").text(txt);
}

当您呼叫$(".textDiv .sp")时，

$(".textDiv .sp").text(txt)位于消息框中，但不在DOM中。这就是为什么它找不到任何东西（$(".textDiv .sp")将仅搜索DOM中已有的元素）。另一种方法：

 $(document).ready(function(){
       $(".textDiv .sp", messageBox).text(txt);
       $('#hel').append(headerIcon,messageBox);       
    }

$(".textDiv .sp", messageBox).text('txt'); - 第二个参数严格说明jQuery应该在messageBox内搜索。它是等效的to messageBox.find(".textDiv .sp").text("txt");

就像其他用户提到的那样 - 如果您想要执行"<script>alert("Test");</script>" - 您应该使用.html代替.text

Answer 3

而不是

$（“。textDiv .sp”）。text（txt）; ，

使用

$（“。textDiv .sp”）。html（txt）;.

当您使用.text()时，浏览器不会将您要放置的任何内容解析为html。它将显示为一个简单的文本。所以只需使用.html()代替。

Answer 4

顺便说一下你引用失败了：

 txt="<script>alert("Test");</script>";

您可以更好地逃避字符串中的斜杠或使用单引号

txt="<script>alert(\"Test\");</script>"; //or
txt="<script>alert('Test');</script>";

Answer 5

检查 test 周围的引号。你需要用单引号而不是双引号来转义它。

txt="<script>alert('Test');</script>";

使用.text（）jquery显示跨度内的文本

5 个答案: