jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: StringString .html( )

描述: 获取匹配元素集中第一个元素的HTML内容。
  • version added: 1.0
  • .html( )

这个方法不可用于XML文档。

在一个HTML文档中, .html()可以用于获取任何元素的内容。 如果选择器表达式匹配了多于一个元素,仅仅返回第一个匹配元素的HTML内容。参考下面一段代码:

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

为了检索下面 <div>的内容,将是文档中第一个有class="demo-container"属性的div内容:

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

结果看起来像这样:

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

这个方法使用浏览器的innerHTML属性。

Examples:

例子:

点击一个p元素,并将其从html转换为text。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }</style>
</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>

Demo:

Returns: jQueryjQuery .html( Function function(index, oldhtml) )

描述: 设置匹配元素集中每一个元素的HTML内容。
  • version added: 1.0
  • .html( String htmlString )
  • htmlString 一个HTML字符串,用于设置每一个匹配元素的内容。
  • version added: 1.4
  • .html( Function function(index, oldhtml) )
  • function(index, oldhtml) A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.

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

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Consider the following HTML:

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

The content of <div class="demo-container"> can be set like this:

$('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 the HTML content to be set 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.

Examples:

Example:

Add some html to each div.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>.red { color:red; }</style>
</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>

Demo:

Example:

Add some html to each div then immediately do further manipulations to the inserted html.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { color:blue; font-size:18px; }</style>
</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>

Demo: