发表新帖
发表新帖

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

后端 未结
关注
16 1469
傲寒
傲寒 2020-11-22 03:45

What the difference between text() and html() functions in jQuery ?

$(\"#div\").html(\'Linkhello\
相关标签:
16条回答
  • 余生分开走
    2020-11-22 04:16

    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 "<" and ">" with their HTML 
entities).
    0 讨论(0)
  • 终归单人心
    2020-11-22 04:17

    $('.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).

    0 讨论(0)
  • 误落风尘
    2020-11-22 04:24

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

    0 讨论(0)
  • 南旧
    2020-11-22 04:25

    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.

    $(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
    Live demo on http://jsfiddle.net/hossain/sUTVg/

    0 讨论(0)
  • 挽巷
    2020-11-22 04:26

    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

    0 讨论(0)
  • 萌比男神i
    2020-11-22 04:26 
    **difference between text()&& html() && val()...?
#Html code..
<select id="d">
<option>Hello</option>
<option>Welcome</option>
</select>
# jquery code..
$(document).ready(function(){
   $("#d").html();
   $("#d").text();
   $("#d").val();

});
    0 讨论(0)
 看不清?
提交回复
热议问题