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

<!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>

The output is

输出是

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

But if I use $(".textDiv .sp").text(txt); instead of messageBox.text(txt); the output is only hi What is going wrong when i use $(".textDiv .sp").text(txt);?

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

Edit : I dont want to inject html.I want to display as text only. But i just want to know why messageBox.text(txt); works but $(".textDiv .sp").text(txt); doesnt

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

5 个解决方案

#1

Try something like this. As far as I understand you, it should help:

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

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

$(".textDiv .sp") is in message box when you call $(".textDiv .sp").text(txt), but not in a DOM. That is why it finds nothing ($(".textDiv .sp") will search only elements already in DOM). Another approach:

当您调用$（“。textDiv .sp”）。text（txt）时，$（“。textDiv .sp”）在消息框中，但不在DOM中。这就是它找不到任何东西的原因（$（“。textDiv .sp”）将只搜索已经存在于DOM中的元素）。另一种方法：

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

$(".textDiv .sp", messageBox).text('txt'); - second param here strictly say that jQuery should search inside messageBox. It is eqvivalent to messageBox.find(".textDiv .sp").text("txt");

$（“。textDiv .sp”，messageBox）.text（'txt'）; - 第二个参数严格说jQuery应该在messageBox内搜索。它与messageBox.find（“。textDiv .sp”）。text（“txt”）;

And just like it was mentioned by other users - in case you want to get "<script>alert("Test");</script>" executed - you should use .html instead of .text

就像其他用户提到的那样 - 如果你想得到“

#2

text() is escaping html tags, if you need to inject html into your document, then use html() http://api.jquery.com/html/

text（）是转义html标签，如果你需要将html注入你的文档，那么使用html（）http://api.jquery.com/html/

Edit : I believe $(".textDiv .sp").text(txt); is not working because the element hasn't been injected into the DOM at that stage, and you're trying to select it from the DOM

编辑：我相信$（“。textDiv .sp”）。text（txt）;因为该元素尚未在该阶段注入DOM，并且您尝试从DOM中选择它，因此无法正常工作

Try to console.log( $(".textDiv .sp") ), and see what that returns.

尝试console.log（$（“。textDiv .sp”）），看看它返回了什么。

#3

Btw you have a failure in your quoting:

顺便提一句，你的报价有失败：

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

You have eigher to escape the slashes in the string or to use single quotes

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

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

#4

instead of

代替

$(".textDiv .sp").text(txt); ,

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

use

使用

$(".textDiv .sp").html(txt);.

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

When you use .text() the browser will not parse into html whatever you want to place there. it will be displayed as a simple text. So just use .html() instead.

当您使用.text（）时，浏览器将无法解析为您要放置的任何内容。它将显示为一个简单的文本。所以只需使用.html（）。

#5

Check the quotes around test. You need to escape it with single quotes rather than double quotes.

检查测试周围的报价。您需要使用单引号而不是双引号来转义它。

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

#1