What is the difference between jQuery text and html

Question

What the difference between text   and html   functions in jQuery        div   html   lt a href  example html  gt Link lt  a gt  lt b gt hello lt  b gt       vs      div   text   lt a href  example html  gt Link lt  a gt  lt b gt hello lt  b gt

User · Answer

I think the difference is nearly self-explanatory. And it's super trivial to test.

jQuery.html() treats the string as HTML, jQuery.text() treats the content as text

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

A difference that may not be so obvious is described in the jQuery API documentation

In the documentation for .html():

The .html() method is not available in XML documents.

And in the documentation for .text():

Unlike the .html() method, .text() can be used in both XML and HTML documents.

_x000D_

$(function() {_x000D_
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');_x000D_
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>_x000D_
<div id="div1"></div>_x000D_
<div id="div2"></div>

_x000D_

_x000D_ Live demo on http://jsfiddle.net/hossain/sUTVg/

User · Answer

The text   method entity-escapes any HTML that is passed into it   Use text   when you want to insert HTML code that will be visible to people who view the page   Technically  your second example produces    amp lt a href  example html  amp gt Link amp lt  a amp gt  amp lt b amp gt hello amp lt  b amp gt    which would be rendered in the browser as    lt a href  example html  gt Link lt  a gt  lt b gt hello lt  b gt    Your first example will be rendered as an actual link and some bold text

User · Answer

please update if necessary  this answer is a Wiki   Sub-question  when only text  what is faster   text   or  html    Answer   html   is faster   See here a  quot behaviour test-kit quot  for all the question  So  in conclusion  if you have  quot only a text quot   use html   method  Note  Doesn t make sense  Remember that the  html   function is only a wrapper to  innerHTML  but in the  text   function jQuery adds an  quot entity filter quot   and this filter naturally consumes time   Ok  if you really want performance    Use pure Javascript to access direct text-replace by the nodeValue property  Benchmark conclusions   jQuery s  html   is  2x faster than  text    pure JS   innerHTML is  3x faster than  html    pure JS   nodeValue is  50x faster than  html     100x than  text    and  20x than  innerHTML   PS   textContent property was introduced with DOM-Level-3   nodeValue is DOM-Level-2 and is faster      See this complete benchmark     Using jQuery  simplecron restart    for  var i 1  i lt 3000  i            quot  work quot   html  BENCHMARK WORK    var ht   simplecron duration    simplecron restart    for  var i 1  i lt 3000  i            quot  work quot   text  BENCHMARK WORK    alert  quot JQuery  3000x    nhtml  quot  ht  quot  ntext  quot  simplecron duration         Using pure JavaScript only  simplecron restart    for  var i 1  i lt 3000  i        document getElementById  work   innerHTML    BENCHMARK WORK   ht   simplecron duration    simplecron restart    for  var i 1  i lt 3000  i         document getElementById  work   nodeValue    BENCHMARK WORK   alert  quot Pure JS  3000x   ninnerHTML  quot  ht  quot  nnodeValue  quot  simplecron duration

User · Answer

The different is  html   evaluate as a html   text   avaluate as a text   Consider a block of html  HTML   lt div id  mydiv  gt   lt div class  mydiv  gt      This is a div container      lt ul gt         lt li gt  lt a href     gt Link 1 lt  a gt  lt  li gt         lt li gt  lt a href     gt Link 2 lt  a gt  lt  li gt       lt  ul gt      a text after ul  lt  div gt   lt  div gt    JS  var out1       mydiv   html    var out2       mydiv   text    console log out1     This output all the html tag console log out2     This is output just the text  This is a div container Link 1 Link 2 a text after ul    The illustration is from this link http   api jquery com text

User · Answer

difference between text   amp  amp  html    amp  amp  val        Html code    lt select id  quot d quot  gt   lt option gt Hello lt  option gt   lt option gt Welcome lt  option gt   lt  select gt    jquery code     document  ready function          quot  d quot   html          quot  d quot   text          quot  d quot   val

User · Answer

Well in simple term   html  -- to get inner html html tags and text    text  -- to get only text if present inside only text

User · Answer

Strange that no-one mentioned the Cross Site scripting prevention benefit of  text   over  html    Although others have just mentioned that  text   escapes the data    It s always recommended to use  text   when you want to update data in DOM which is just data   text for the user to see    html   should be mostly used to get the HTML content within a div

User · Answer

I think that the difference  is to insert html tag  in text   you  html tag do not functions       output   html  You are registered    lt br gt                                  Mister         name         sourname        output     You are registered  lt br gt  Mister name sourname   replacing text   with html    output    You are registered Mister name sourname    then the tag  lt br gt  works in html

User · Answer

The first example will actually embed HTML within the div whereas the second example will escape the text by means of replacing element-related characters with their corresponding character entities so that it displays literally  i e  the HTML will be displayed not rendered

User · Answer

div   html val  will set the HTML values of all selected elements      div   text val  will set the text values of all selected elements   API docs for jQuery text    API docs for jQuery html    I would guess that they correspond to Node textContent and Element innerHTML  respectively   Gecko DOM references

User · Answer

Use  text      when you intend to display the value as a simple text   Use  html      when you intend to display the value as a html formatted text  or HTML content    You should definitely use  text      when you   re not sure that your text  e g  coming from an input control  do not contain characters tags that has special meaning in HTML  This is really important because this could result in the text will not display properly but it could also cause that an unwanted JS script snippet  e g  coming from another user input  to be activated

User · Answer

var v    quot  amp  x5168  amp  x540D  quot      quot  div quot   html v     display as  quot    quot     quot  div quot   text v     display as  quot  amp  x5168  amp  x540D  quot   text       This method sets or returns the text content of elements selected  html       This method sets or returns the content of elements selected  Refer example here   https   www tutorialspoint com online jquery editor php

User · Answer

Actually both do look somewhat similar but are quite different it depends on your usage or intention what you want to achieve    Where to use    use  html   to operate on containers having html elements  use  text   to modify text of elements usually having separate open and closing tags   Where not to use     text   method cannot be used on form inputs or scripts     val   for input or textarea elements   html   for value of a script element   Picking up html content from  text   will convert the html tags into html entities    Difference     text   can be used in both XML and HTML documents   html   is only for html documents    Check this example on jsfiddle to see the differences in action  Example

User · Answer

text function set or retrieve the value as plain text  otherwise  HTML function set or retrieve the value as HTML tags to change or modify that  If you want to just change the content then use text    But if you need to change the markup then you have to use hmtl     It s a dummy answer for me after six years  Don t mind

User · Answer

Basically      div   html uses element innerHTML to set contents  and     div   text  probably  uses element textContent    http   docs jquery com Attributes html    Set the html contents of every matched element   http   docs jquery com Attributes text    Similar to html    but escapes HTML  replace   lt   and   gt   with their HTML  entities

User · Answer

text   will give you the actual text in between HTML tags  For example  the paragraph text in between p tags  What is interesting to note is that it will give you all the text in the element you are targeting with with your   selector plus all the text in the children elements of that selected element  So If you have multiple p tags with text inside the body element and you do a   body  text    you will get all the text from all the paragraphs   Text only  not the p tags themselves     html   will give you the text and the tags  So   body  html   will basically give you your entire page HTML page   val   works for elements that have a value attribute  such as input  An input does not have contained text or HTML and thus  text   and  html   will both be null for input elements

[jquery] What is the difference between jQuery: text() and html() ?

Examples related to jquery

Examples related to dom