为什么使用javascript时带html标签的文本无法正确显示？

Question

I have this text :

 <p class="rtejustify">No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p>

that if i use it like this:

<div class="corpo">     
    <p class="rtejustify">No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p>

shows up correct in the html page... Like this :

No âmbito do Programa de Literacia Estatística promovido , a terceira sessão decorrerá no tendo como recurso estatístico o Portal do Eurostat.

but i if get the same code in a js function and put it on a variable, when i open the html file the html tags are also presented...

Example: click to test

 var texto= "<p class="rtejustify">No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p>"; $(".corpo").text(texto); 

 .corpo { background-color:#000066 ; opacity: 0.8; filter: alpha(opacity=50); width:1000px; height:380px; position:fixed; z-index:3; overflow: scroll; color:white; font-family:Arial; font-size:20px; font-style:normal; font-weight:bold; overflow-y:scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="corpo"> <p class="rtejustify">No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p> </div> 

Answer 1

Instead of the text function, use the html function. http://api.jquery.com/html/

It is strange that my browser has the same behaviour for text and html , but basically, if you're using html: use html , otherwise use text .

Using Opera on Mac OS X Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36 OPR/29.0.1795.47 It is maybe a bug in Opera or by (flawed) design.

Answer 2

    var texto= "<p class='rtejustify'>No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p>";
$(".corpo").html(texto);

Try this code..

@Barmar : You should have used html() instead of text(). And You have used doublequotes inside the javascript variable texto . The classname rtejustify should be in placed between singlequotes.

Answer 3

method 1

insted use javascript direct function like this: document.getElemenstByClassName('corpo')[0].innerHTML="your text"

method 2

document.getElemenstByClassName('corpo')[0].appendChild(document.createTextNode("your text")) this one is different from the above one in the aspect that it prints all the tag and everything.

method 3

document.getElemenstByClassName('corpo')[0].innerHTML= document.getElemenstByClassName('corpo')[0].value+ "your text"

this way allows us to use the tags.

method 2 and method 3 is like usign Jquery $(".corpo").text(texto); and $(".corpo").html(texto); respectively.(please not that i don't think it is the implementation of Jquery).

The difference lies between these two method is that the Ist creates a Node what that mean Javascript treates everything as a String it dont differentiates between <p> and p ie tags and simple text where as innerHTML just put the things in between the double quotes in an element becauses of this we can take the advantages of tags there.

This technique is used in Firefox. There in textarea everyline you enter it is put into the textarea tag as a text Node. You can see this your self in Console.

See working example

Answer 4

Replace your code with the below code.

var texto= "<p class='rtejustify'>No &acirc;mbito do Programa de Literacia Estat&iacute;stica promovido pela Biblioteca, a terceira sess&atilde;o decorrer&aacute; no dia 28, entre as 14h30 e as 17h00, na Sala EC-101 (STI), tendo como recurso estat&iacute;stico o Portal do Eurostat.</p>";
$(".corpo").text(texto);