jQuery html()方法

jQuery html()方法用于更改选定元素的整个内容。它用新内容替换选定元素的内容。

注意：它是一个非常有用的函数，但由于其API文档的限制，它只能在有限的范围内工作。jQuery html函数的API文档由三种方法签名组成。

第一种方法签名没有参数，所以它只返回该元素中的HTML。剩下的两种方法签名接受一个参数：即一个字符串或一个返回字符串的函数。

语法：

$(selector).html()

它用于返回内容。

$(selector).html(content)

它用于设置内容。

$(selector).html(function (index, currentcontent))

它用于通过调用函数来设置内容。

jQuery的html()方法可用于设置所选元素的内容或返回内容。

设置内容： 当您使用此方法设置内容时，它会覆盖所有匹配元素的内容。
返回内容： 当您使用此方法返回内容时，它返回第一个匹配元素的内容。

text()方法用于设置或返回仅所选元素的文本内容。

jQuery html()方法的参数

参数	描述
content	这是一个必需的参数。它用于指定所选元素的新内容。它还可以包含HTML标签。
Function (index, currentcontent)	这是一个可选的参数。它指定一个返回所选元素新内容的函数。

Index : 它显示集合中元素的索引位置。
Currentcontent : 它显示所选元素的当前HTML内容。

示例1

让我们通过一个例子来演示jQuery html()方法。它可以改变所有p元素的内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        $("p").html("Hello <b>Javatpoint.com</b>");
    });
});
</script>
</head>
<body>
<button>Click here to change the content of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

示例2

让我们看一个jQuery html()方法的另一个示例，该方法返回HTML内容。它只返回第一个段落的内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        alert($("p").html());
    });
});
</script>
</head>
<body>

<button>Return the content of p element</button>

<p>This is first <b>paragraph</b>.</p>
<p>This is another <b>paragraph</b>.</p>
</body>
</html>

示例3

让我们看一个将HTML转换为文本的jQuery html()方法的另一个示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
  b {
    text-decoration: underline;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
  <b>Click</b> here to change the <span id="tag">html</span> to text
</p>
<script>
 $( "p" ).click(function() { var htmlString =$ ( this ).html();
  $( this ).text( htmlString );
});
</script>
</body>
</html>