使用.text()jquery显示跨度内的文本

时间:2022-03-21 18:57:30
<!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


2  

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


6  

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


1  

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


1  

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


1  

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

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

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

#1


2  

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


6  

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


1  

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


1  

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


1  

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

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

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