返回值:Stringhtml()

Get the HTML contents of the first element in the set of matched elements.

This method is not available on XML documents.

In an HTML document, we can use .html() to get the contents of any element. If the selector expression matches more than one element, only the first one's HTML content is returned. Consider this code: 

$('div.demo-container').html();

In order for the following <div>'s content to be retrieved, it would have to be the first one with class="demo-container" in the document: 

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

The result would look like this:

<div class="demo-box">Demonstration Box</div>

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

示例:

Click a paragraph to convert it from html to text.

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>

    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>

    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>

<script>


    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });


</script>
</body>
</html>
演示:

返回值:jQueryhtml(htmlString)

Set the HTML contents of each element in the set of matched elements.

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

When we use .html() to set elements' contents, any contents that were in those elements is completely replaced by the new contents. Consider the following HTML: 

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

We can set the HTML contents of <div class="demo-container"> like so: 

$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');

That line of code will replace everything inside <div class="demo-container">: 

<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

As of jQuery 1.4, the .html() method allows us to set the HTML content by passing in a function. 

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

Given a document with six paragraphs, this example will set the HTML of <div class="demo-container"> to <p>All new content for <em>6 paragraphs!</em></p>.

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

示例:

Add some html to each div.

<!DOCTYPE html>
<html>
<head>
<style>

  .red { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<span>Hello</span>
  <div></div>
  <div></div>
  <div></div>

<script>

$("div").html("<span class='red'>Hello <b>Again</b></span>");

</script>
</body>
</html>
演示:

示例:

Add some html to each div then immediately do further manipulations to the inserted html.

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; font-size:18px; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div></div>
  <div></div>
  <div></div>

<script>



    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");



</script>
</body>
</html>
演示: