.html()

Contents:

.html() 返回: String

描述: 从匹配的第一个元素中获取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>

举例:

点击段落将HTML转化为文本

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Demo:

.html( htmlString ) 返回 jQuery

描述: 设置每一个匹配元素的html内容。

  • version added: 1.0.html( htmlString )

    htmlString用来设置每个匹配元素的一个HTML 字符串。

  • version added: 1.4.html( function(index, html) )

    function(index, html)用来返回设置HTML内容的一个函数。接收元素的索引位置和元素旧的HTML作为参数。。

这个 .html() 方法对 XML 文档无效.

我们可以使用 .html() 来设置元素的内容,在这些元素的任何内容完全被新的内容取代。考虑以下的HTML:

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

我们可以像这样设置 <div class="demo-container">的HTML内容:

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

这行代码将替换 <div class="demo-container">里的所有内容

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

在 jQuery 1.4中, .html() 方法允许我们通过函数来传递HTML内容。

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

给定一个拥有6个段落的HTML文档,在这个例子中将设置 <p>All new content for <em>6 paragraphs!</em></p><div class="demo-container">的新HTML内容:

举例

例子: 为每个div设置一些内容。

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

  .red { color:red; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Demo:

例子: 添加了一些html到每个div,然后立刻做进一步的操作来插入的HTML。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

Demo:

设计酷,jquery1.6 api中文手册